如何在javascript的第一个下拉值部分的基础上填写第二个下拉列表？ [英] How to fill second dropdown on the base of first dropdown value part in javascript?
本文介绍了如何在javascript的第一个下拉值部分的基础上填写第二个下拉列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面的下拉列表，我想在第一个下拉值的基础上填写第二个下拉菜单。
< select id =iFunctionname =nFunction>
< option value = - 1selected =>选择...< / option>
< option value =1> Drilling< / option>
< option value =2> Gas< / option>
< select id =iOperationname =nOperation>
< option value = - 1selected =>选择...< / option>
< option value =1_21> Drill1< / option>
< option value =1_22> Drill2< / option>
< option value =2_21>压缩< /选项>
< option value =2_22> Dehydration< / option>
< / select>
当我点击iFunction下拉列表中的钻取选项时，我想要在下拉列表中的1个普通基础上的另一个下拉列表中填写Drill1和Drill2。
有人可以建议我接近吗？
谢谢。
我的尝试：
我尝试了谷歌提供的许多方法
解决方案
试试
<！DOCTYPE html>
< html>
< head>
< script>
function changeddl（obj）{
var text = obj.options [obj.selectedIndex] .text;
var ddl2 = document.querySelectorAll（'＃iOperation option'）;
for（var i = 1; i< ddl2.length; i ++）{
var option = ddl2 [i];
option.style.display ='none';
if（text =='Drilling'）{
if（['Drill1'，'Drill2']。indexOf（option.text）> -1）
option.style.display ='block'
}
if（text =='Gas'）{
if（['Compression'，'Dehydration']。indexOf（option.text）> ; -1）
option.style.display ='block'
}
}
}
< / script>
< / head>
< body>
< select id =iFunctionname =nFunctiononchange =changeddl（this）>
< option value = - 1selected =>选择...< / option>
< option value =1> Drilling< / option>
< option value =2> Gas< / option>
< / select>
< select id =iOperationname =nOperation>
< option value = - 1selected =>选择...< / option>
< option value =1_21> Drill1< / option>
< option value =1_22> Drill2< / option>
< option value =2_21>压缩< /选项>
< option value =2_22> Dehydration< / option>
< / select>
< / body>
< / html>
I have tow following dropdowns and I want to fill second dropdown on the base of first dropdown value.
<select id="iFunction" name="nFunction"> <option value="-1" selected="">Select…</option> <option value="1">Drilling</option> <option value="2">Gas</option> <select id="iOperation" name="nOperation"> <option value="-1" selected="">Select…</option> <option value="1_21">Drill1</option> <option value="1_22">Drill2</option> <option value="2_21">Compression</option> <option value="2_22">Dehydration</option> </select>
When I click Drilling option in iFunction dropdown then I want to fill Drill1 and Drill2 in another dropdown on the base of 1 common in both the dropdown list.
Can someone suggest me approach?
Thanks.
What I have tried:
i have tried many approach provided in google
解决方案
try
<!DOCTYPE html> <html> <head> <script> function changeddl(obj) { var text = obj.options[obj.selectedIndex].text; var ddl2 = document.querySelectorAll('#iOperation option'); for (var i = 1; i < ddl2.length; i++) { var option = ddl2[i]; option.style.display = 'none'; if (text == 'Drilling') { if (['Drill1', 'Drill2'].indexOf(option.text) > -1) option.style.display = 'block' } if (text == 'Gas') { if (['Compression', 'Dehydration'].indexOf(option.text) > -1) option.style.display = 'block' } } } </script> </head> <body> <select id="iFunction" name="nFunction" onchange="changeddl(this)"> <option value="-1" selected="">Select…</option> <option value="1">Drilling</option> <option value="2">Gas</option> </select> <select id="iOperation" name="nOperation"> <option value="-1" selected="">Select…</option> <option value="1_21">Drill1</option> <option value="1_22">Drill2</option> <option value="2_21">Compression</option> <option value="2_22">Dehydration</option> </select> </body> </html>
这篇关于如何在javascript的第一个下拉值部分的基础上填写第二个下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
