Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <select id="cboGender">
    <option id="Male">Male</option>
    <option id="Female">Female</option>
    <option id="Unspecified">Unspecified</option>
  </select>
  
  <select id="cboMale" class="user-combo" hidden>
    <option id="1">Oscar</option>
    <option id="2">Leo</option>
  </select>
  
  <select id="cboFemale" class="user-combo" hidden>
    <option id="3">Kristy</option>
    <option id="4">Wendy</option>
  </select>
  
  <select id="cboUnspecified" class="user-combo" hidden>
    <option id="5">Jamie</option>
    <option id="6">Charlie</option>
  </select>
  
</body>
</html>
 
$(function() {
  var $genders = $("#cboGender");
  var $userCombos = $(".user-combo");
  
  var onGenderChanged = function() {
    var gender = $genders.val();
    
    // Hide all gender combo boxes...
    $userCombos.hide();
    
    // ... then show the one corresponding to the selection
    $("#cbo" + gender).show();
  };
  
  // Show the right combo box for first load
  onGenderChanged();
  
  // Now register for changes
  $genders.change(onGenderChanged);
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers