title: How can I update select options based on selected radio button?
body: <p>I have an assignment for my class, and we have to create a website that has 4 different radio buttons, but with each of those buttons, there is a drop down list with different options for each button. I am struggling trying to figure out how to put this into JavaScript. </p>
  
  <p>There are 4 days you have to select from: day 1, day 2, day 3 and day 4. day 1 and day 3 have times of 2pm, 5pm, and 8pm; while day 2 and day 4 have times of 1pm and 4pm.</p>
  
  <p>This is the code I have so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>function onLoad() {
    //method for button times
    var select = document.getElementById("day1");
    select.options[select.options.length] = new Option("2:00 PM", "2pm");
  
    var select = document.getElementById("day1");
    select.options[select.options.length] = new Option("5:00 PM", "5pm");
  
    var select = document.getElementById("day1");
    select.options[select.options.length] = new Option("8:00 PM", "8pm");
  
    var select = document.getElementById("day2");
    select.options[select.options.length] = new Option("1:00 PM", "1pm");
  
    var select = document.getElementById("day2");
    select.options[select.options.length] = new Option("4:00 PM", "4pm");
  }
  </code></pre>
  
  <p>This is the relevant portion from the index.html file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Choose Your Date&lt;/h2&gt;
  &lt;input type="radio" value="sat_feb8" name="date1" id="day1" onclick="onLoad();" checked="checked"&gt;
  &lt;label for="size1"&gt;Saturday, February 8&lt;/label&gt;
  &lt;br&gt;
  
  &lt;input type="radio" value="sun_feb9" name="date1" id="day2" onclick="onLoad()"&gt;
  &lt;label for="size2"&gt;Sunday, February 9&lt;/label&gt;
  &lt;br&gt;
  
  &lt;input type="radio" value="sat_feb15" name="date1" id="day1" onclick="onLoad()"&gt;
  &lt;label for="size3"&gt;Saturday, February 15&lt;/label&gt;
  &lt;br&gt;
  
  &lt;input type="radio" value="sun_feb15" name="date1" id="day1" onclick="onLoad()"&gt;
  &lt;label for="size4"&gt;Sunday, February 16&lt;/label&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>I called the <code>onLoad</code> function for each of the buttons in the index page.
  Thank you!</p>