1

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>
Govind
  • 87
  • 2
  • 12
  • Where does it fail to you? – Desaroll Dec 22 '15 at 23:53
  • As I see it, this line should fail: `$("#subcats").append("");`, as you are closing and opening the "" when you set the "value" field. Try using `$("#subcats").append("");`. \" means a " which should not be read by JavaScript. – Desaroll Dec 23 '15 at 00:02

1 Answers1

2

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:

Community
  • 1
  • 1
Omar Yafer
  • 823
  • 6
  • 17