html和javascript中的依賴下拉列表

我想要放置一對依賴下拉列表，其中第一個列表是控制器的集合，第二個列表是訪問點的集合。當我選擇controller1時，第二個下拉菜單應該顯示選擇僅連接到controller1的接入點的選項。我已經寫了下面的代碼，從其中一個回答的問題獲得幫助，但由於編程知識有限，無法完成它。任何人都可以請幫我完成這個：html和javascript中的依賴下拉列表

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

來源

2015-12-22 Govind

它在哪裏不好嗎？ – Desaroll

正如我所看到的，這行應該失敗：'$（「＃subcats」）。append（「」）;'，當你設置「值」字段時，關閉並打開「」。嘗試使用'$（「＃subcats」）。append（「」）;'。「意味着」不應該被JavaScript讀取的「。 – Desaroll

下面是一個例子代碼，我做了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.logs（）僅在您編碼時用作幫助，之後必須將其刪除。
IDK如果是好的做法，但我更喜歡通過名稱獲取輸入值。它可以幫助我處理表單。

注：

來源

2015-12-23 00:11:09

我會在一段時間內完成練習。我離開你的小提琴開始。 –

非常感謝，我檢查了小提琴.....在那裏工作很好，但是相同的代碼似乎並沒有在我的日食.........任何線索？ – Govind

你有jQuery添加到您的HTML？ –

html和javascript中的依賴下拉列表

回答

相關問題