html和javascript中的依赖下拉列表 [英] Dependent dropdown list in html and javascript
本文介绍了html和javascript中的依赖下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想放一个从属的下拉列表，其中第一个列表是控制器的集合，sencond list是接入点的集合。当我选择controller1时，第二个下拉列表应该显示选择一个连接到controller1的接入点的选项。我写了以下代码从一个已回答的问题的帮助，但无法完成它，由于我有限的编程知识。任何人都可以帮助我完成这个：
<！DOCTYPE html>
< html>
< head>
< meta charset =ISO-8859-1>
< title> UH WiFi使用率报告< / title>
< / head>
< table class =maintable>
< tr style =line-height：50px;>
< td>选择控制器< / td>
< td>：< / td>
< td>
< select>
< option values => - 选择 - < / option>
< option> controller1< / option>
< option> controller2< / option>
< option> controller3< / option>
< option> controller4< / option>
< / select>
< / td>
< / tr>
< tr style =line-height：20px;>
< td>选择访问点< / td>
< td>：< / td>
< td>
< select style =float：left; id =subsats>
< / select>
< / td>
< / tr>
< / table>
< script type =text / javascript>
var Controller1 = [
{display：AccessPoint1，value：Access Point1}，
{display：AccessPoint2，value：Access Point2}，
{display：AccessPoint3，value：Access Point3}，
{display：AccessPoint4，value：Access Point4}];
var Controller2 = [
{display：AccessPoint5，value：Access Point5}，
{display：AccessPoint6，value： Point6}，
{display：AccessPoint7，value：Access Point7}，
{display：AccessPoint8，value：Access Point8}];
var Controller3 = [
{display：AccessPoint9，value：Access Point9}，
{display：AccessPoint10，value： Point10}，
{display：AccessPoint11，value：Access Point11}，
{display：AccessPoint12，value：Access Point12
var Controller4 = [
{display：AccessPoint13，value：Access Point13}，
{display：AccessPoint14，value： Point14}，
{display：AccessPoint15，value：Access Point15}，
{display：AccessPoint16，value：Access Point16}];
$（＃controllers）。change（function（）{
var parent = $（this）.val（）;
switch（parent）{
case'controller1'：
list（Controller1）;
break;
case'controller2'：
list（Controller2）;
break;
case 'controller3'：
list（Controller3）;
break;
case'controller4'：
list（Controller4）;
break;
默认值： / default child option is blank
$（＃subsats）。html（''）;
break;
}
}
函数列表（array_list）
{
$（＃subcats）。html（）; // reset child options
$（array_list）.each（function（i）{//填充子选项
$（＃subscats）append（< option value =+ array_list [i] .value +>+ array_list [i] .display +< / option>）;
}）;
}
< / script>
< body>
< body>
< / body>
< / body>
< / html>
解决方案
这是一个示例代码 JS fiddle
这是代码：
HTML
< table class = >
< tr style =line-height：50px;>
< td>选择控制器< / td>
< td>：< / td>
< td>
< select name =controllers>
< option values =0> - 选择 - < / option>
< option value =1> controller1< / option>
< option value =2> controller2< / option>
< option value =3> controller3< / option>
< option value =4> controller4< / option>
< / select>
< / td>
< / tr>
< tr style =line-height：20px;>
< td>选择访问点< / td>
< td>：< / td>
< td>
< select name =accessPointstyle =float：left; id =subsats>
< / select>
< / td>
< / tr>
< / table>
一些指针
- 命名您的输入
- 确保您的值是唯一的。
编辑
- 向选项中添加值。
Jquery
var controllerData = new Array（）;;
controllerData.push（{}）;
controllerData.push（
[
{display：Access Point 1，value：AccessPoint1}，
{display：Access Point 2，value：AccessPoint2 }，
{display：Access Point 3，value：AccessPoint3}，
{display：Access Point 4，value：AccessPoint4}
]
）;
controllerData.push（
[
{display：Access Point 5，value：AccessPoint5}，
{display：Access Point 6，value：AccessPoint6 }，
{display：Access Point 7，value：AccessPoint7}，
{display：Access Point 8，value：AccessPoint8}
]
）;
$（document）.ready（function（）{
$（'SELECT [name =controllers]' b console.log（controllerData）;
var selectValue = $（this）.val（）;
var selectAccessPoint = $（SELECT [name ='accessPoint']）;
selectAccessPoint .empty（）;
console.log（Select value+ selectValue +，controllerData size：+ controllerData.length）;
if（selectValue& .length）{
console.log（Select value is accesible）;
for（i = 0; i
selectAccessPoint.append（< option value = \+ controllerData [selectValue] [i] .value +\>+ controllerData [ select option {< / option>）; else {
selectAccessPoint.append（< option> ;）;
}
}）;
}）;
编辑
-
最好把你的接入点当作一个矩阵。通过这样做，您将使代码可以扩展，而不会弄乱您的函数。
- console.logs（）在您编写代码时只有帮助，所以必须删除它们
-
IDK，如果它是好的做法，但我更喜欢获得输入值的名称。
注意：
$ b
I am trying to put a pair of dependent dropdown list wherein the first list is the collection of controllers and sencond list is the collection of access points. When I select controller1, the second dropdown should show me the options to select an access point connected to controller1 only. I have written the following code taking help from one of the answered question but unable to complete it due to my limited knowledge of programming. Can anyone please help me in completing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>UH WiFi Utilization Report</title>
</head>
<table class="maintable">
<tr style="line-height:50px;">
<td>Select Controller</td>
<td>:</td>
<td>
<select>
<option values="">--Select--</option>
<option> controller1</option>
<option> controller2</option>
<option> controller3</option>
<option> controller4</option>
</select>
</td>
</tr>
<tr style="line-height:20px;">
<td>Select Access Point</td>
<td>:</td>
<td>
<select style="float:left;" id="subcats">
</select>
</td>
</tr>
</table>
<script type="text/javascript">
var Controller1 = [
{display: "AccessPoint1", value: "Access Point1"},
{display: "AccessPoint2", value: "Access Point2"},
{display: "AccessPoint3", value: "Access Point3"},
{display: "AccessPoint4", value: "Access Point4"}];
var Controller2 = [
{display: "AccessPoint5", value: "Access Point5"},
{display: "AccessPoint6", value: "Access Point6"},
{display: "AccessPoint7", value: "Access Point7"},
{display: "AccessPoint8", value: "Access Point8"}];
var Controller3 = [
{display: "AccessPoint9", value: "Access Point9"},
{display: "AccessPoint10", value: "Access Point10"},
{display: "AccessPoint11", value: "Access Point11"},
{display: "AccessPoint12", value: "Access Point12"}];
var Controller4 = [
{display: "AccessPoint13", value: "Access Point13"},
{display: "AccessPoint14", value: "Access Point14"},
{display: "AccessPoint15", value: "Access Point15"},
{display: "AccessPoint16", value: "Access Point16"}];
$("#controllers").change(function() {
var parent = $(this).val();
switch(parent){
case 'controller1':
list(Controller1);
break;
case 'controller2':
list(Controller2);
break;
case 'controller3':
list(Controller3);
break;
case 'controller4':
list(Controller4);
break;
default: //default child option is blank
$("#subcats").html('');
break;
}
});
function list(array_list)
{
$("#subcats").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#subcats").append("<option value=""+array_list[i].value+"">"+array_list[i].display+"</option>");
});
}
</script>
<body>
<body>
</body>
</body>
</html>
解决方案
Here is an example code I made JS fiddle
Here is the code:
HTML
<table class="maintable">
<tr style="line-height:50px;">
<td>Select Controller</td>
<td>:</td>
<td>
<select name="controllers">
<option values="0">--Select--</option>
<option value="1"> controller1</option>
<option value="2"> controller2</option>
<option value="3"> controller3</option>
<option value="4"> controller4</option>
</select>
</td>
</tr>
<tr style="line-height:20px;">
<td>Select Access Point</td>
<td>:</td>
<td>
<select name="accessPoint" style="float:left;" id="subcats">
</select>
</td>
</tr>
</table>
Some pointers
- Name your inputs
- Make sure your values are unique.
edit
- Add a value to your options.
Jquery
var controllerData = new Array();;
controllerData.push({});
controllerData.push(
[
{display: "Access Point 1", value: "AccessPoint1"},
{display: "Access Point 2", value: "AccessPoint2"},
{display: "Access Point 3", value: "AccessPoint3"},
{display: "Access Point 4", value: "AccessPoint4"}
]
);
controllerData.push(
[
{display: "Access Point 5", value: "AccessPoint5"},
{display: "Access Point 6", value: "AccessPoint6"},
{display: "Access Point 7", value: "AccessPoint7"},
{display: "Access Point 8", value: "AccessPoint8"}
]
);
$(document).ready(function(){
$('SELECT[name="controllers"]').on('change', function(){
console.log(controllerData);
var selectValue = $(this).val();
var selectAccessPoint = $("SELECT[name='accessPoint']");
selectAccessPoint.empty();
console.log("Select value " + selectValue +", controllerData size: "+ controllerData.length);
if(selectValue < controllerData.length){
console.log("Select value is accesible");
for(i = 0; i < controllerData[selectValue].length; i++){
console.log("Val:" + controllerData[selectValue] );
selectAccessPoint.append("<option value=\""+controllerData[selectValue][i].value+"\">"+controllerData[selectValue][i].display +"</option>");
}
}else{
selectAccessPoint.append("<option>- NO data -</option>");
}
});
});
edit
It might be better to think of your access Points as a matrix. By doing this you will enable your code to scale without messing with your function. You might even create a separate file for your access point data.
The console.logs() are there only as help while you code, they must be removed afterwards.
IDK if it is good practice, but I prefer getting the value of inputs by name. It helps me when working with forms.
note:
这篇关于html和javascript中的依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
