ASP.NET dropdown list options depends on chosen option in other dropdown list

Question

I have simple ViewModel that I passed to view in my application, it has two SelectLists with several options like, e.g:

public class MyViewModel {

public SelectList Names { get; set;}   // e.g options - N1,N2,N3

public SelectList Years { get; set;}  // e.g options -  Y1,Y2,Y3


}

There are several options defined for each of those SelecLists. In my view I have two DropDownListFor in which user can easily choose option - it's independent.

But what I want to do is that, when user choose in 1st dropdownlist option N1, then in second dropdown list will be available only options Y2,Y3. When user choose N2, in second one will appear only N3 etc.

Something with jQuery maybe? How to get information which option is currently chosen in particular dropdown list? With JavaScript?

How do you determine the condition of what should appear and what shouldn't in the second list? is it like `x` in first list it means `x+1` onwards in the second ? — Searching, Nov 01 '16 at 01:30

score 0 · Accepted Answer · edited May 23 '17 at 10:29

Yes it ist possibile with javascript.

First you need to get the selected option from the dropdownlist by using javascript or Jquery for example like this:

yourSelect.options[ yourSelect.selectedIndex ].value

then you have to set an disabled attribute with either javascript or jquery.

The answer in this post here might be helpful.

Furthermore look at this example

If you want them to be completely deleted then you wolud need to take them out by deleteing the node using JQuery for example.

score 0 · Answer 2 · answered Nov 01 '16 at 20:28

I solved my issue with jQuery, if someone will need it:

  @Html.DropDownListFor(model => model.Name, Model.Names, "Wybierz rodzaj", new { @class = "form-control", onchange="setRateOptionsByDepositType(this.value)"})

.js file:

function setRateOptionsByDepositType(type) {

    if (type === "Lokata standardowa") {
        $('#rate').prop('selectedIndex', 0);
        $('option[value="0,60"]').hide();
        $('option[value="1,70"]').show();
        $('option[value="2,00"]').show();
        $('option[value="2,20"]').show();
        $('option[value="2,70"]').show();
    }
    else if (type === "Rachunek oszczędnościowy") {
        $('#rate').prop('selectedIndex', 0);
        $('option[value="0,60"]').show();
        $('option[value="1,70"]').hide();
        $('option[value="2,00"]').hide();
        $('option[value="2,20"]').hide();
        $('option[value="2,70"]').hide();
    }
}

Where rate is id of other dropdownlist in this page

ASP.NET dropdown list options depends on chosen option in other dropdown list

2 Answers2