How to generate dynamic drop down on page load using jquery?

Question

Hi i have five html screens and will be navigating to the page based on the role selected on the dropdown in the page?

Here is the code i am using for generating the drop downs.

 var roleByCatgory = { Education: ["Schools", "Colleges"], Operations: ["Director", "Controller"], Entertainment: ["Music", "dance"] } function cat(value) { if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; else { var catOptions = ""; catOptions += "<option disabled selected>--Select--</option>"; for (categoryId in roleByCatgory[value]) { catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>"; } $("#category").html(catOptions); var dropdown_role = document.getElementById("category").value; $("#category").on('change', function () { if ($("#category").val() == "Schools") { location.href = "school.html"; } else if ($("#category").val() == "Colleges") { location.href = "Colleges.html"; } else if ($("#category").val() == "Director") { location.href = "Director.html"; } }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 col-lg-4 col-lg-offset-2 col-xs-6"> <!-- modification to be done for dropdown --> <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);"> <option value="--" selected>--Select--</option> <option value="Education" selected>Education</option> <option value="Operations">Operations</option> <option value="Entertainment">Entertainment</option> </select> </div> <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12"> <div class="form-group"> <div class="input"> <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select> </div> </div> </div> 

on page load i am not able to get the second drop down values? on page navigation i should able to display the current values of both drop down values .

Answer 1

@BhavaniSankar is you want to keep both drop down visible on screen, you need to use iframe for it.

Check this:

  var roleByCatgory = { Education: ["Schools", "Colleges"], Operations: ["Director", "Controller"], Entertainment: ["Music", "dance"] } $(document).ready(function () { cat($("#Maindropdown").val()); }); function cat(value) { if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; else { var catOptions = ""; catOptions += "<option disabled selected>--Select--</option>"; for (categoryId in roleByCatgory[value]) { catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>"; } $("#category").html(catOptions); var dropdown_role = document.getElementById("category").value; $("#category").on('change', function () { if ($("#category").val() == "Schools") { $('#iFrame1').attr("src","school.html"); } else if ($("#category").val() == "Colleges") { $('#iFrame1').attr("src","Colleges.html"); } else if ($("#category").val() == "Director") { $('#iFrame1').attr("src", "Director.html"); } }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 col-lg-4 col-lg-offset-2 col-xs-6"> <!-- modification to be done for dropdown --> <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);"> <option value="--" selected>--Select--</option> <option value="Education" selected>Education</option> <option value="Operations">Operations</option> <option value="Entertainment">Entertainment</option> </select> </div> <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12"> <div class="form-group"> <div class="input"> <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select> </div> </div> </div> <iframe id="iFrame1" height="100%" width="100%" style="min-height:300px;border:none"></iframe> 

There is one more solution is available, that you load html content using jquery ajax request.

Answer 2

Here is the jQuery ajax method using "load()" function

Check this:

  var roleByCatgory = { Education: ["Schools", "Colleges"], Operations: ["Director", "Controller"], Entertainment: ["Music", "dance"] } $(document).ready(function () { cat($("#Maindropdown").val()); }); function cat(value) { if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; else { var catOptions = ""; catOptions += "<option disabled selected>--Select--</option>"; for (categoryId in roleByCatgory[value]) { catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>"; } $("#category").html(catOptions); var dropdown_role = document.getElementById("category").value; $("#category").on('change', function () { if ($("#category").val() == "Schools") { $("#div1").load("school.html"); } else if ($("#category").val() == "Colleges") { $("#div1").load("Colleges.html"); } else if ($("#category").val() == "Director") { $("#div1").load("Director.html"); } }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 col-lg-4 col-lg-offset-2 col-xs-6"> <!-- modification to be done for dropdown --> <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);"> <option value="--" selected>--Select--</option> <option value="Education">Education</option> <option value="Operations">Operations</option> <option value="Entertainment">Entertainment</option> </select> </div> <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12"> <div class="form-group"> <div class="input"> <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select> </div> </div> </div> <div id="div1" style="min-height:200px;width:100%;border:solid 1px #c6c6c6"></div> 

Now the content is loading inside div tag when you select the drop down list.