Comment sélectionner une option dans une liste déroulante basée sur une sélection dans une autre liste déroulante

Question

J'ai deux listes DropDown qui sont déjà remplies à partir de la base de données. Si vous sélectionnez une valeur dans DropDownlist1 - Dropdownlist2 obtient la même valeur que celle sélectionnée dans Dropdownlist1.

Mais le code est basé sur le cas du commutateur et les options sont codées en dur! À l'avenir - De nombreuses options pourraient surgir et cela ne fonctionnera pas!

donc ce que je veux est Si vous sélectionnez une option dans la liste Dropdown 1 - L'option doit être sélectionnée dans la liste DropDown 2 basée sur l ' « indice » « valeur » et non Like here

Les pointeurs ou aide serait apprécié! Merci à l'avance

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>  

Answer 1

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

Answer 2

Lorsque vous imprimez sur toutes les options dans les boîtes de sélection, vous pouvez donner les options ids liées à leur index dans le tableau:

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

Et puis dans votre javascript:

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

Il serait assez facile d'analyser l'élément 'select' que vous envoyez à la fonction, de sorte que vous ne changiez que l'option sélectionnée de l'élément OTHER, mais il est tard et je suis fatigué alors je vais laissez cela à vous :)