CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4html.dropdownlistfor
Kelly Cline
Kelly Cline

Reputation: 2246

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

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?

Upvotes: 0

Views: 435

Answers (1)

Koti Panga
Koti Panga

Reputation: 3720

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"
        }));
    });
});

Upvotes: 1

Related Questions