Question

I have a DropDownFor on my View and I’m looking to create another DropDownFor only if a particular SelectList item from the first DropDownFor is selected.

To clarify, if my DropDownFor has two possible choices, “A” and “B”, and if “B” is selected, I want another DropDownFor to display on the page. If “A” is selected, I want nothing more to happen to the page.

How can I implement this?

Answer 1

Something like this should do the trick:

script (using jQuery)

$(document).ready(function() {
    $('#optionOne').change(function (){
        if($(this).val() === 'b') {
            $('#options').append("<select><option>newset</option></select>");
        }            
    });
});​

markup

<div id="options">
    <select id="optionOne">
        <option>a</option>
        <option>b</option>
    </select>
​</div>​

JSFiddle Example of the above code — http://jsfiddle.net/NpSPj/1/