title: Dynamically fill select field in html and javascript
body: <p>I am building a form that should advise a user to choose for a certain plan based on the first choice it makes. I've got this code from a youtube tutorial and edited a little bit but it won't work anymore. The main problem is that the second select dropdown field won't be filled in after one selects an option in the first field.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function populate(s1,s2){
     var s1 = document.getElementById(s1);
     var s2 = document.getElementById(s2);
     s2.innerHTML = "";
     if(s1.value == "daily"){
        var optionArray = ["plan1|Plan 1","plan2|Plan 2","plan3|Plan 3"];
     } else if(s1.value == "weekly"){
        var optionArray = ["plan2|Plan 2","plan1|Plan 1","plan3|Plan 3"];
     } else if(s1.value == "biweekly"){
        var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
     } else if(s1.value == "monthly"){
        var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
  
     for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
     }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2&gt;Choose Your Car&lt;/h2&gt;
  &lt;hr /&gt;
  Frequency of playing
  &lt;select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="daily"&gt;Daily&lt;/option&gt;
    &lt;option value="weekly"&gt;Weekly&lt;/option&gt;
    &lt;option value="biweekly"&gt;Bi-Weekly&lt;/option&gt;
    &lt;option value="monthly"&gt;Monthly&lt;/option&gt;
  &lt;/select&gt;
  &lt;hr /&gt;
  We have determined a plan for you that will suit you best, feel free to select another plan:
  &lt;select id="slct2" name="slct2"&gt;&lt;/select&gt;
  &lt;hr /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>