Populate a DropDown/Select based on the value chosen on another DropDown

Question

I\'m a beginner developer but I stumbled across a case I can\'t solve. I\'m using ASP.NET MVC with C# plus some javascript (JQuery, JSON...).

What I have to do is to

Answer 1

There's a good tutorial on how to do that From Stephen Walther

it should be easy to do

Answer 2

You basically want to attach a javascript event onto the first drop list and have jquery query a web service (or other) to get the details for that ID. Then in javascript you re-render the second drop list with the available options. A pretty good example is here. Javascript extract from the example is below:

$(function() {
        $.getJSON("/Home/Countries/List", function(data) {
            var items = "---------------------";
            $.each(data, function(i, country) {
                items += "" + country.Text + "";
            });
            $("#Countries").html(items);
        });

    $("#Countries").change(function() {
        $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
            var items = "---------------------";
            $.each(data, function(i, state) {
                items += "" + state.Text + "";
            });
            $("#States").html(items);
        });
    });
});

Answer 3

You need to catch the first DropDown's change event. and in this populate / select the value you needs.

$('#Phase_ID').change(function(){
        var t = $(this);
        $('#Order_ID').val(t.val());  // this is only for example.
});