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

Question

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>

ipr101 · Accepted Answer · 2011-08-06T08:36:31.857

3

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

edited Aug 06 '11 at 08:36

answered Aug 06 '11 at 08:22

ipr101

24,096
8
59
61

In your answer, you need to modify `...list.options[i].select...` to list*two*. Besides that: nice! – Veger Aug 06 '11 at 08:31
This one worked ! Instead of text I used the value because both the drop down lists have different text ! Much Thanks ! – Aug 06 '11 at 09:57
perfect, tyvm :) – Hashaam Ahmed Sep 18 '18 at 08:19

score 0 · Answer 2 · answered Aug 06 '11 at 08:29

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 :)

Cool ! Thanks - I took this idea and put up in the answer that ipr101 gave - Helped me ! — , Aug 06 '11 at 10:53

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

2 Answers2

Linked