MVC 4 .NET use jquery to modify the set of options in a dropdown list

Question

I am using @Html.DropDownListFor to build a select object that looks like this:

<select id="GroupCode" name="GroupCode" tabindex="4"><option value="">Select One</option>

<option value="1">One thing</option>

<option value="17">Another thing</option>

<option value="7">A Third thing</option>

</select>

There comes a time when something else changes on the page, and I want to swap out the options, ending up with something like

<select id="GroupCode" name="GroupCode" tabindex="4"><option value="">Select One</option>

<option value="21">A completely different list</option>

<option value="17">A second item only</option>

</select>

However, when I set a breakpoint in the view and look at $('#GroupCode').html, I see something like this:

$('#GroupCode').html
function(a){return p.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(bm,""):b;if(typeof a=="string"&&!bs.test(a)&&(p.support.htmlSerialize||!bu.test(a))&&(p.support.leadingWhitespace||!bn.test(
    __proto__: 
function() {
    [native code]
}

    arguments: null
    caller: null
    length: 1
    prototype: {...}

where I was expecting to see something like the html above.

What I'm concerned about is whether, by replacing the html for #GroupCode, I will lose what was provided by the @Html.DropDownFor code.

Bottom line: what is a good way to replace the contents of a dropdown list like this?

To remove existing options use $('#GroupCode').empty() and to add new options use $('#GroupCode').append($('<option></option>').val('21').text('Another option')); — user3559349
– user3559349, Commented Oct 30, 2014 at 21:06
This works (thanks!) although it is not in the form of an answer. — Kelly Cline
– Kelly Cline, Commented Oct 31, 2014 at 13:33

Koti Panga · Accepted Answer · 2014-10-30 21:15:11Z

1

See this Working fiddle example

HTML

<select id="GroupCode" name="GroupCode" tabindex="4">
    <option value="">Select One</option>
    <option value="1">One thing</option>
    <option value="17">Another thing</option>
    <option value="7">A Third thing</option>
</select>
<button id="testBtn" type="button">replace list with items with ids (21, 7)</button>

Script:

$(function () {
    $(document).on("click", "#testBtn", function () {
        $('#GroupCode').empty().append(
        $('<option/>', {
            value: "",
            text: 'Select One'
        }),
        $('<option/>', {
            value: "21",
            text: "A completely different list"
        }),
        $('<option/>', {
            value: "17",
            text: "A second item only"
        }));
    });
});

answered Oct 30, 2014 at 21:15

Koti Panga

3,7302 gold badges20 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC 4 .NET use jquery to modify the set of options in a dropdown list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related