如何根据其他下拉列表中的选择在下拉列表中选择一个选项 [英] How to select an option in a dropdown list based on a selection in another dropdown list

问题描述

我有两个DropDown列表已经从数据库填充。如果您在DropDownlist1中选择一个值 - Dropdownlist2将获得与Dropdownlist1中选择的相同值。

但是代码基于开关盒，并且选项是硬编码的！将来 - 许多选择可能会弹起来，它不会奏效！

所以我想要的是如果在下拉列表中选择一个选项1 - 应该根据值而不是索引在DropDown列表2中选择该选项像这里

任何指针或帮助将不胜感激！感谢提前

  function showSelected（f）{
 
 var selNum = f.type1.selectedIndex; 
 // var selText = f.type1.options [selNum] .text 
 
 
 switch（selNum）
 {
案例1：
 document.getElementById（'type2'）。selectedIndex = 2; 
 break; 
 
 case 2：
 document.getElementById（'type2'）。selectedIndex = 8; 
 break; 
 
案例3：
 document.getElementById（'type2'）。selectedIndex = 3; 
 break; 
 
案例4：
 document.getElementById（'type2'）。selectedIndex = 1; 
 break; 
 
案例5：
 document.getElementById（'type2'）。selectedIndex = 4; 
 break; 
 
案例6：
 document.getElementById（'type2'）。selectedIndex = 2; 
 break; 
 
案例7：
 document.getElementById（'type2'）。selectedIndex = 2; 
 break; 
 
案例8：
 document.getElementById（'type2'）。selectedIndex = 7; 
 break; 
 
} 
 
 
} 
 
< select name =Type1id =Type1onchange =showSelected（this。形式）> 
< option>选择选项< / option> 
< option value =<？php echo $ record-> getID（）;？> > <？php echo $ record-> getIDName（）;？> < /选项> 
< / select> 
 
< select name =Type2id =Type2disabled> 
< option>选择选项< / option> 
< option value =<？php echo $ record-> getID（）;？> ><？php echo $ record-> getIDValue（）;？> < /选项> 
< / select> 
  

解决方案

  function selectoption （）
 {
 var list = document.getElementById（'list'）; 
 var listtwo = document.getElementById（'listtwo'）; 
 var searchtext = list.options [list.selectedIndex] .text; 
（var i = 0; i  if（listtwo.options [i] .text === searchtext）listtwo.options [i]。 selected = true; 
} 
  

http://jsbin.com/oyaloc/2

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

这篇关于如何根据其他下拉列表中的选择在下拉列表中选择一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！