html和javascript中的依赖下拉列表

时间：2021-12-29 14:12:59

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:

我试图把一对依赖的下拉列表，其中第一个列表是控制器的集合，而sencond列表是访问点的集合。当我选择controller1时，第二个下拉列表应显示选择仅连接到controller1的接入点的选项。我已经编写了以下代码，从一个已回答的问题中获取帮助，但由于我对编程知识有限而无法完成。任何人都可以帮我完成这个：

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

1 个解决方案

#1

1  

Here is an example code I made JS fiddle

这是我制作JS小提琴的示例代码

Here is the code:

这是代码：

HTML

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

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.

    console.logs（）仅在您编码时作为帮助，之后必须将其删除。

  • IDK if it is good practice, but I prefer getting the value of inputs by name. It helps me when working with forms.

    IDK，如果这是一个好习惯，但我更喜欢按名称获取输入值。它在处理表单时帮助我。

note:

注意：

#1

1  

Here is an example code I made JS fiddle

这是我制作JS小提琴的示例代码

Here is the code:

这是代码：

HTML

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

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.

    console.logs（）仅在您编码时作为帮助，之后必须将其删除。

  • IDK if it is good practice, but I prefer getting the value of inputs by name. It helps me when working with forms.

    IDK，如果这是一个好习惯，但我更喜欢按名称获取输入值。它在处理表单时帮助我。

note:

注意：

标签：

相关文章