title: How to update strongly typed Html.DropDownList using Jquery
body: <p>I have a webpage with two radiobuttons and a dropdownlist as follows:</p>
  
  <pre><code>&lt;div class="sectionheader"&gt;Course
      &lt;div class="dropdown"&gt;&lt;%=Html.DropDownList("CourseSelection", Model.CourseList, new { @class = "dropdown" })%&gt; &lt;/div&gt;         
      &lt;div class="radiobuttons"&gt;&lt;label&gt;&lt;%=Html.RadioButton("CourseType", "Advanced", false )%&gt; Advanced &lt;/label&gt;&lt;/div&gt;
      &lt;div class="radiobuttons"&gt;&lt;label&gt;&lt;%=Html.RadioButton("CourseType", "Beginner", true )%&gt; Beginner &lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The dropdownlist is strongly typed and populated with <code>Model.CourseList</code> (NB - on the first page load, 'Beginner' is the default selection and the dropdown shows the beginner course options accordingly)</p>
  
  <p>What I want to be able to do is to update the DropDownList based on which radiobutton is selected i.e. if 'Advanced' selected then show one list of course options in dropdown, and if 'Beginner' selected then show another list of courses.</p>
  
  <p><strong>Edit - posted my own answer below to show solution that worked for me (finally!)</strong></p>