Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <select id="pet" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Pet</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
  
<select id="color" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Color</option>
    <option>Red</option>
    <option>Green</option>
    <option>Purple</option>
</select>
<span id="result">Make a selection to see the result here</span>
</body>
</html>
 
var selections = {
  'Cat-Green': 'Rubert',
  'Dog-Red': 'Mike',
  'Cat-Purple': 'Rachel',
  'Fish-Red':  'Thomas'
};
function update() {
  var key = $("#pet").val() + '-' + $("#color").val();
  if(key in selections) $("#result").text(selections[key]);
  else $("#result").text('No one selected that combination.');
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
majid4466pro
0viewers