How to select an option in a dropdown list based on a selection in another dropdown list

I have two DropDown lists which are开发者_运维知识库 already populated from the database. If you select a value in DropDownlist1 - Dropdownlist2 gets the same value that was selected in Dropdownlist1.

But the code is based on switch case and also the options are hard coded ! In future - Many options might spring up and it will not work !

So what I want is If you select an option in Dropdown list 1 - The option should be selected in DropDown list 2 based on the "value" and not "index" Like here

Any pointers or help would be appreciated ! Thanks in advance

 function showSelected(f) {

var selNum  = f.type1.selectedIndex;
//var selText = f.type1.options[selNum].text


switch (selNum)
{
case 1:
document.getElementById('type2').selectedIndex= 2;
break;

case 2:
document.getElementById('type2').selectedIndex = 8;
break;

case 3:
document.getElementById('type2').selectedIndex = 3;
break;

case 4:
document.getElementById('type2').selectedIndex = 1;
break;

case 5:
document.getElementById('type2').selectedIndex = 4;
break;

case 6:
document.getElementById('type2').selectedIndex = 2;
break;

case 7:
document.getElementById('type2').selectedIndex = 2;
break;

case 8:
document.getElementById('type2').selectedIndex = 7;
break;

}


}

 <select name="Type1" id="Type1" onchange="showSelected(this.form)" >
<option>Select Option</option>
    <option  value="<?php echo $record->getID();?>" > <?php echo $record->getIDName();?> </option>
 </select>       

 <select name="Type2" id="Type2" disabled>
<option>Select Option</option>
    <option  value="<?php echo $record->getID();?>" ><?php echo $record->getIDValue();?> </option>
 </select>     

function selectoption()
    {
        var list = document.getElementById('list');
        var listtwo = document.getElementById('listtwo');
        var searchtext = list.options[list.selectedIndex].text; 
        for(var i = 0; i < listtwo.options.length; ++i)
            if (listtwo.options[i].text === searchtext) listtwo.options[i].selected = true;
    }

http://jsbin.com/oyaloc/2

When you're printing out all of the options in the select boxes, you can give the options ids related to their index in the array:

<select id='first_combo_box' onchange='selected(this);'>
<?php
  foreach( $arrayOfOptions as $index => $option ):
?>
    <option value='<?php echo $option?>' id='first_combo_index_<?php echo $index?>'><?php echo $option ?></option>
<?php
  endforeach;
?>
</select>

<select id='second_combo_box' onchange='selected(this);'>
<?php
  foreach( $arrayOfOptions as $index => $option ):
?>
    <option value='<?php echo $option?>' id='second_combo_index_<?php echo $index?>'><?php echo $option ?></option>
<?php
  endforeach;
?>
</select>

And then in your javascript:

function selected(selectElt) {
  var index = selectElt.selectedIndex;
  document.getElementById('first_combo_index_' + index).selected = true;
  document.getElementById('second_combo_index_' + index).selected = true;
}

It'd be pretty easy to parse which 'select' element you're sending to the function, so that you only change the selected option of the OTHER select element, but it's late and I'm tired so I'll leave that to you :)