title: Dynamically Populating Drop down list from selection of another drop down value
body: <p>My requirement is that for a selection in a 'meal' drop down list, a second drop down list 'category' should get dynamically populated with values related to the selection in first drop down list. Then depending on what is selected in the meal dropdown, the list should change in category. I have written the following Javascript function but the output I'm getting is not freshly populating the 2nd dropdown. On change of a selection, the new list is just getting appended to the old list.  </p>
  
  <pre><code>function changecat() {
      var selectHTML = "";
  
      var A = ["Soup", "Juice", "Tea", "Others"];
      var B = ["Soup", "Juice", "Water", "Others"];
      var C = ["Soup", "Juice", "Coffee", "Tea", "Others"];
  
      if (document.getElementById("meal").value == "A") {
          var select = document.getElementById('category').options.length;
  
          for (var i = 0; i &lt; select; i++) {
              document.getElementById('category').options.remove(i);
          }
  
          for (var i = 0; i &lt; A.length; i++) {
              var newSelect = document.createElement('option');
              selectHTML = "&lt;option value='" + A[i] + "'&gt;" + A[i] + "&lt;/option&gt;";
              newSelect.innerHTML = selectHTML;
              document.getElementById('category').add(newSelect);
          }
      }
  
      else if (document.getElementById("meal").value == "B") {
          var select = document.getElementById('category').options.length;
  
          for (var i = 0; i &lt; select; i++) {
              document.getElementById('category').options.remove(i);
          }
  
          for (var i = 0; i &lt; B.length; i++) {
              var newSelect = document.createElement('option');
              selectHTML = "&lt;option value='" + B[i] + "'&gt;" + B[i] + "&lt;/option&gt;";
              newSelect.innerHTML = selectHTML;
              document.getElementById('category').add(newSelect);
          }
      }
  
      else if (document.getElementById("project").value == "C") {
          var select = document.getElementById('category').options.length;
  
          for (var i = 0; i &lt; select; i++) {
              document.getElementById('category').options.remove(i);
          }
  
          for (var i = 0; i &lt; C.length; i++) { 
              var newSelect = document.createElement('option');
              selectHTML = "&lt;option value='" + C[i] + "'&gt;" + C[i] + "&lt;/option&gt;";
              newSelect.innerHTML = selectHTML;
              document.getElementById('category').add(newSelect);
          }
      }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>HTML-  
  &lt;select name="meal" id="meal" onchange="changecat();"&gt;
      &lt;option value=""&gt;Select&lt;/option&gt;
      &lt;option value="A"&gt;A&lt;/option&gt;
      &lt;option value="B"&gt;B&lt;/option&gt;
      &lt;option value="C"&gt;C&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="category" id="category"&gt;
      &lt;option value=""&gt;Select&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>