正如问题所说,我如何使用jQuery添加一个新的选项到下拉列表?

谢谢


当前回答

你可能想先清除你的下拉菜单 $ (' # DropDownQuality ')空虚();

我让我的控制器在MVC中返回一个只有一个项目的选择列表。

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

其他回答

不使用任何额外的插件,

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

如果您有很多选项,或者这段代码需要非常频繁地运行,那么您应该考虑使用DocumentFragment,而不是不必要地多次修改DOM。只有少数几个选择,我认为这是不值得的。

------------------------------- 添加 --------------------------------

DocumentFragment是一个提高速度的好选项,但是我们不能使用document.createElement('option')创建选项元素,因为IE6和IE7不支持它。

我们可以做的是,创建一个新的选择元素,然后附加所有选项。循环完成后,将其附加到实际的DOM对象。

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());

这样我们只修改DOM一次!

在没有插件的情况下,这可以更容易,而不需要使用太多的jQuery,而是稍微老派一些:

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

如果你想指定选项a)是否是默认选择值,b)现在应该被选择,你可以传递另外两个参数:

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

函数:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}

你可以直接使用

美元(Html ddlClassName”)。(“<选项selected =价值=“selected \ \ " \ " > 1 < /选项> <选项价值= \ " \ " > 2 < /选项>”)

这里你可以使用直接字符串

请注意@Phrogz的解决方案不能在ie8中运行,而@nickf的解决方案可以在所有主流浏览器中运行。另一种方法是:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});