How do I add options to a DropDownList using jQuer

问题:

As the question says, how do I add a new option to a DropDownList using jQuery?

Thanks

回答1:

Without using any extra plugins,

var myOptions = {
    val1 : \'text1\',
    val2 : \'text2\'
};
var mySelect = $(\'#mySelect\');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $(\'<option></option>\').val(val).html(text)
    );
});

If you had lots of options, or this code needed to be run very frequently, then you should look into using a DocumentFragment instead of modifying the DOM many times unnecessarily. For only a handful of options, I\'d say it\'s not worth it though.

------------------------------- Added --------------------------------

DocumentFragment is good option for speed enhancement, but we cannot create option element using document.createElement(\'option\') since IE6 and IE7 are not supporting it.

What we can do is, create a new select element and then append all options. Once loop is finished, append it to actual DOM object.

var myOptions = {
    val1 : \'text1\',
    val2 : \'text2\'
};
var _select = $(\'<select>\');
$.each(myOptions, function(val, text) {
    _select.append(
            $(\'<option></option>\').val(val).html(text)
        );
});
$(\'#mySelect\').append(_select.html());

This way we\'ll modify DOM for only one time!

回答2:

With no plug-ins, this can be easier without using as much jQuery, instead going slightly more old-school:

var myOptions = {
    val1 : \'text1\',
    val2 : \'text2\'
};
$.each(myOptions, function(val, text) {
    $(\'#mySelect\').append( new Option(text,val) );
});

If you want to specify whether or not the option a) is the default selected value, and b) should be selected now, you can pass in two more parameters:

    var defaultSelected = false;
    var nowSelected     = true;
    $(\'#mySelect\').append( new Option(text,val,defaultSelected,nowSelected) );

回答3:

With the plugin: jQuery Selection Box. You can do this:

var myOptions = {
        \"Value 1\" : \"Text 1\",
        \"Value 2\" : \"Text 2\",
        \"Value 3\" : \"Text 3\"
    }
    $(\"#myselect2\").addOption(myOptions, false); 

回答4:

You may want to clear your DropDown first $(\'#DropDownQuality\').empty();

I had my controller in MVC return a select list with only one item.

$(\'#DropDownQuality\').append(
        $(\'<option></option>\').val(data[0].Value).html(data[0].Text));    

回答5:

Add item to list in the begining

$(\"#ddlList\").prepend(\'<option selected=\"selected\" value=\"0\"> Select </option>\');

Add item to list in the end

$(\'<option value=\"6\">Java Script</option>\').appendTo(\"#ddlList\");

Common Dropdown operation (Get, Set, Add, Remove) using jQuery

回答6:

Pease note @Phrogz\'s solution doesn\'t work in IE 8 while @nickf\'s works in all major browsers. Another approach is:

$.each(myOptions, function(val, text) {
    $(\"#mySelect\").append($(\"<option/>\").attr(\"value\", val).text(text));
});

回答7:

U can use direct

$\"(.ddlClassName\").Html(\"<option selected=\\\"selected\\\" value=\\\"1\\\">1</option><option value=\\\"2\\\">2</option>\")

-> Here u can use direct string

回答8:

And also, use .prepend() to add the option to the start of the options list. http://api.jquery.com/prepend/

回答9:

using jquery you can use

      this.$(\'select#myid\').append(\'<option>newvalue</option>\');

where \"myid\" is the id of the dropdown list and newvalue is the text that you want to insert..

回答10:

I needed to add as many options to dropdowns as there were dropdowns on my page. So I used it in this way:

function myAppender(obj, value, text){
    obj.append($(\'<option></option>\').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $(\'[id*=\"ddlPosition_\"]\').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $(\'[id*=\"ddlPosition_\"]\').each(function() {
        var myId = this.id.split(\'_\')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($(\'[id*=\"ddlPosition_\'+myId+\'\"]\'), i, i+1);
        }
        $(\'[id*=\"ddlPosition_\'+myId+\'\"]\').val(builder);
        builder++;
    });
});

This dynamically set up dropdowns with values like 1 to n, and automatically selected the value for the order that dropdown was in (i.e. 2nd dropdown got \"2\" in the box, etc.).

It was ridiculous that I could not use this or this.Object or $.obj or anything like that in my 2nd .each(), though --- I actually had to get the specific ID of that object and then grab and pass that whole object to my function before it would append. Fortunately the ID of my dropdown was separated by a \"_\" and I could grab it. I don\'t feel I should have had to, but it kept giving me jQuery exceptions otherwise. Something others struggling with what I was might enjoy knowing.

回答11:

try this Function:

function addtoselect(param,value){
    $(\'#mySelectBox\').append(\'<option value=\'+value+\'>\'+param+\'</option>\');
}