html和javascript中的依赖下拉列表

Dependent dropdown list in html and javascript

本文关键字：依赖 下拉列表 javascript html      更新时间：2023-09-26

我试图放置一对相关下拉列表，其中第一个列表是控制器的集合，第二个列表是接入点的集合。当我选择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>

下面是我制作的JS fiddle 的示例代码

这是代码：

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>

一些指针

  • 命名您的输入
  • 确保你的价值观是独一无二的

编辑

  • 为您的选项添加值

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>");
      }
    });
  
  });

编辑

  • 最好将您的接入点视为一个矩阵。通过这样做，您将使您的代码能够扩展，而不会干扰您的功能。您甚至可以为您的访问点数据创建一个单独的文件。

  • console.log（）只是在编写代码时提供帮助，之后必须删除它们。

  • IDK，如果这是一个好的实践，但我更喜欢通过名称获得输入的值。它在处理表单时对我有帮助。

注意：

相关文章：