2 dependent ddls

SOURCE: http://stackoverflow.com/questions/13935285/work-with-2-dropdown-items-in-jquery

by Annie Lagang

HTML

1st DropDown: 
<select name="d1" id="d1">
    <option>---</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br />
 2nd DropDown: 
<select name="d2" id="d2">
    <option>---</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

CSS

* {
    font-family:tahoma;
    font-size:9pt
}

JavaScript

$('#d1').change(function(e) {
    index = $(this).prop('selectedIndex');
   $('#d2 option:eq(' + index + ')').css('display','none').siblings().css('display','block');
});

$('#d2').change(function(e) {
    index = $(this).prop('selectedIndex');
  $('#d1 option:eq(' + index + ')').css('display','none').siblings().css('display','block');
});