title: Jquery: Change contents of <select> tag dynamically
body: <p>I'm using ASP.Net MVC4 for developing a simple web app. The scenario is something like this:</p>
  
  <p>I have 2 drop down boxes. The content of the second one is dependent on the value is selected from the first one. </p>
  
  <p>The first Drop down list contains a list of <strong>Languages</strong>:</p>
  
  <pre><code>&lt;div&gt;
      &lt;select id="myParent"&gt;
          &lt;option value="English"&gt; English&lt;/option&gt;
          &lt;option value="French"&gt; French&lt;/option&gt;
          &lt;option value="German"&gt; German&lt;/option&gt;
          &lt;option value="Spanish"&gt; Spanish&lt;/option&gt;
      &lt;/select&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Now, based on the value selected in the above drop-down list, i have Messages in corresponding languages, which must be populated in the second drop-down list.</p>
  
  <p>I'm getting these messages from the controller using a <code>ViewModel</code> object.</p>
  
  <p>The initial population of the drop-down is as shown below:</p>
  
  <pre><code>&lt;div&gt;
      &lt;select id="myChild"&gt;
           @if(Model.CurrentLang == "English")
           {
                foreach( var item in Model.EnglishMessages)
                {
                        &lt;option value="@item.Value"&gt;"@item.Value"&lt;/option&gt;
                }
           }
           else if(Model.CurrentLang == "French")
           {
                foreach( var item in Model.FrenchMessages)
                {
                        &lt;option value="@item.Value"&gt;"@item.Value"&lt;/option&gt;
                }
           }
           else if(Model.CurrentLang == "Spanish")
           {
                foreach( var item in Model.Spanish)
                {
                        &lt;option value="@item.Value"&gt;"@item.Value"&lt;/option&gt;
                }
           }
           else if(Model.CurrentLang == "German")
           {
                foreach( var item in Model.GermanMessages)
                {
                        &lt;option value="@item.Value"&gt;"@item.Value"&lt;/option&gt;
                }
           }
  
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On using the above approach i'm able to get a proper list of items in the second drop-down, as the <code>"Model.CurrentLanguage"</code>has the default language when the page loads.</p>
  
  <p>The problem occurs when i have selected a new item from the first drop down, how do i re-populate the second drop-down? That is the contents of the second drop down must be refreshed dynamically, based on the language selected from the first drop down.</p>
  
  <p>In the script tag i'm getting the selected value of the first drop down as shown below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        $(function () {
  
               $('#myParent').click(function () {
                  //Here i'm getting the value i select in the first drop down
                  var language= $('#myParent').find(":selected").val();
               });
  
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I feel the re-population of the second drop-down must take place in <code>$('#myParent').click</code> .</p>
  
  <p>Tried some stuff but nothing seems to work. Can anyone please sugges a solution for the same?</p>
  
  <p>Thanks in advance.</p>