Зависимый выпадающий список в html и javascript

Я пытаюсь установить пару зависимых выпадающих списков, в которых первым списком является коллекция контроллеров, а список sencond - это коллекция точек доступа. Когда я выбираю контроллер1, второй раскрывающийся список должен показывать мне опции для выбора точки доступа, подключенной только к контроллеру1. Я написал следующий код, помогающий ответить на один из ответов на вопрос, но не смог его завершить из-за моих ограниченных знаний о программировании. Может кто-нибудь, пожалуйста, помогите мне в завершении этого:Зависимый выпадающий список в 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>"); 
     } 
    }); 

    });

редактировать

Это может быть лучше думать о ваших точек доступа в качестве матрицы. Делая это, вы включите свой код в масштабе, не испортив свою функцию. Вы даже можете создать отдельный файл для данных точки доступа.
Консоль.logs() используются только в качестве справочной системы при кодировании, они должны быть удалены впоследствии.
IDK, если это хорошая практика, но я предпочитаю получать значения входов по имени. Это помогает мне при работе с формами.

примечание:

источник

2015-12-23 00:11:09

Я закончу упражнение через некоторое время. Я оставляю вам скрипку, чтобы начать. –

Спасибо большое, я проверил скрипку ..... отлично работает там, тем не менее, тот же код, похоже, не работает в моем затмении ......... какой-нибудь ключ? – Govind

У вас есть jquery, добавленный в ваш html? –

Зависимый выпадающий список в html и javascript

ответ

Смежные вопросы