Dependent dropdown list in html and javascript

Question

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>

As I see it, this line should fail: $("#subcats").append("<option value=""+array_list[i].value+"">"+array_list[i].display+"</option>");, as you are closing and opening the "" when you set the "value" field. Try using $("#subcats").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");. \" means a " which should not be read by JavaScript. — Desaroll
– Desaroll, Commented Dec 23, 2015 at 0:02

Community · Accepted Answer · 2020-06-20 09:12:55Z

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:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 23, 2015 at 0:11

Omar Yafer

8637 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Omar Yafer Over a year ago

I shall complete the excercise in a while. I leave you the fiddle to get started.

Govind Over a year ago

Thanks a lot, I checked the fiddle.....works fine over there however the same code doesn't seem to work in my eclipse.........any clue?

Omar Yafer Over a year ago

Do you have jquery added to your html?

Omar Yafer Over a year ago

Try adding <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> right before the script that has the function in the fiddle.

Collectives™ on Stack Overflow

Dependent dropdown list in html and javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related