Jquery: Change contents of <select> tag dynamically

Question

I'm using ASP.Net MVC4 for developing a simple web app. The scenario is something like this:

I have 2 drop down boxes. The content of the second one is dependent on the value is selected from the first one.

The first Drop down list contains a list of Languages:

<div>
    <select id="myParent">
        <option value="English"> English</option>
        <option value="French"> French</option>
        <option value="German"> German</option>
        <option value="Spanish"> Spanish</option>
    </select>
<div>

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.

I'm getting these messages from the controller using a ViewModel object.

The initial population of the drop-down is as shown below:

<div>
    <select id="myChild">
         @if(Model.CurrentLang == "English")
         {
              foreach( var item in Model.EnglishMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "French")
         {
              foreach( var item in Model.FrenchMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "Spanish")
         {
              foreach( var item in Model.Spanish)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "German")
         {
              foreach( var item in Model.GermanMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }

    </select>
</div>

On using the above approach i'm able to get a proper list of items in the second drop-down, as the "Model.CurrentLanguage"has the default language when the page loads.

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.

In the script tag i'm getting the selected value of the first drop down as shown below:

<script type="text/javascript">
      $(function () {

             $('#myParent').click(function () {
                //Here i'm getting the value i select in the first drop down
                var language= $('#myParent').find(":selected").val();
             });

        });
</script>

I feel the re-population of the second drop-down must take place in $('#myParent').click .

Tried some stuff but nothing seems to work. Can anyone please sugges a solution for the same?

Thanks in advance.

Answer 1

Pseudo code:

$("#myParent").on('change',function(){
      var parentValue=$(this).Val();

      //clear the child 
      $("#myChild").empty();

      //Get select value and call ajax, which populate child dropdown-list
       populateChild(parentValue);

       or call controller model
});


function populateChild(value){

   var jsonData = JSON.stringify({
                    aData: value
                });
     $.ajax({
        type: "POST",
        url: "test/test",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response){
            var aData=response.d
            // now append aData to your childDropdownlist
    }

    function OnErrorCall(response){ }
}

---

Am assuming you are returning JSON data

function OnSuccess(response){
    var aData=response.d
    $("#myChild").empty();

    var frag;
    $.each(aData, function (index, item) {
            frag +="<li>"+item.Value+"</li>";
     });

    $("#myChild").append(frag);
}