title: How to generate dynamic drop down on page load using jquery?
body: <p>Hi i have five html screens and will be  navigating to the page based on the role selected on the dropdown in the page?</p>
  
  <p>Here is the code i am using for generating the drop downs.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var roleByCatgory = {
              Education: ["Schools", "Colleges"],
              Operations: ["Director", "Controller"],
              Entertainment: ["Music", "dance"]
  
          }
  
          function cat(value) {
              if (value.length == 0) document.getElementById("category").innerHTML = "&lt;option&gt;&lt;/option&gt;";
              else {
                  var catOptions = "";
                  catOptions += "&lt;option disabled selected&gt;--Select--&lt;/option&gt;";
                  for (categoryId in roleByCatgory[value]) {
                      catOptions += "&lt;option&gt;" + roleByCatgory[value][categoryId] + "&lt;/option&gt;";
                  }
                  $("#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";
                      }
                  });
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-6 col-lg-4  col-lg-offset-2 col-xs-6"&gt;
          &lt;!-- modification to be done for dropdown --&gt;
          &lt;select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);"&gt;
              &lt;option value="--" selected&gt;--Select--&lt;/option&gt;
              &lt;option value="Education" selected&gt;Education&lt;/option&gt;
              &lt;option value="Operations"&gt;Operations&lt;/option&gt;
              &lt;option value="Entertainment"&gt;Entertainment&lt;/option&gt;
  
          &lt;/select&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12"&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="input"&gt;
                  &lt;select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"&gt;&lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 . </p>