title: How to clear Select Box old Data & Fill with new Data on Selection Javascript?
body: <p>I have 2 drop downs, this thing here is when user select BMW i want to fill data 1,2,3,4,5 &amp; when he selects Volvo i want to display 5,6,7,8,9. Data is getting populated in second drop down but i can see old data as well &amp; as many times i click the list is getting increased. I want to show only specific data on selection &amp; data should also not get repeated. below is my approach.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function myFunction() {
              var x = document.getElementById("mySelect").value;
              if(x=='BMW'){
                  var select = document.getElementById("participant");
                  var options = ["1", "2", "3", "4", "5"];
                  for(var i = 0; i &lt; options.length; i++) {
                      var opt = options[i];
                      var el = document.createElement("option");
                      el.textContent = opt;
                      el.value = opt;
                      select.appendChild(el);
                  }
              }
              if(x=='Volvo'){
                  var select = document.getElementById("participant");
                  var options = ["6", "7", "8", "9", "10"];
                  console.log(options)
                  for(var i = 0; i &lt; options.length; i++) {
                      var opt = options[i];
                      var el = document.createElement("option");
                      el.textContent = opt;
                      el.value = opt;
                      select.appendChild(el);
                  }
              }
  
          }
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;select id="mySelect" onchange="myFunction()"&gt;
          &lt;option value="" disabled selected&gt;Select Type&lt;/option&gt;
          &lt;option value="BMW"&gt;BMW&lt;/option&gt;
          &lt;option value="Volvo"&gt;Volvo&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;select id="participant"&gt;
          &lt;option&gt;select&lt;/option&gt;
      &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>