如何将选项添加到使用jQuery一个DropDownList?如何将选项添加到使用jQuery一个D

2019-05-10 14:11发布

因为这个问题说,我怎么添加一个新的选项,使用jQuery一个DropDownList?

谢谢

Answer 1:

不使用任何额外的插件,

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仅一次!



Answer 2:

由于没有插件,这样可以在不使用尽可能多的jQuery的容易,而不是去稍微老派:

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

如果你想指定选项)是否是默认选择的值,和b)应选择现在,你可以通过在两个参数:

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


Answer 3:

随着插件: jQuery的选择框 。 你可以这样做:

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


Answer 4:

您可能要清除下拉第一$(“#DropDownQuality”)空()。

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

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


Answer 5:

添加项目在开始时列出

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

添加项目到最后列出

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

使用jQuery通用下拉操作(获取,设置,添加,删除)



Answer 6:

皮斯记@ Phrogz的解决方案并不在IE 8,而@ nickf的作品在所有主要浏览器。 另一种方法是:

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


Answer 7:

U可以直接使用

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

- >这里u可以使用直接串



Answer 8:

而且,使用.prepend()的选项添加到选项列表的开始。 http://api.jquery.com/prepend/



Answer 9:

使用jQuery你可以使用

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

其中,“ 身份识别码 ”是下拉列表和NEWVALUEID是要插入文本..



Answer 10:

我需要尽可能多的选项,有我的网页上的下拉列表中添加下拉菜单。 所以,我用它以这种方式:

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

此动态建立的下拉列表中包含值1至n,并且自动选择的顺序值下拉是(即第二下拉中的“2”的框等得到)。

这是荒谬的,我不能用thisthis.Object$.obj或类似的东西在我的第二个.each()不过---实际上我得到那个对象的特定ID,然后抓住并传递整个对象到我的功能,将追加前。 幸运的是我的下拉的ID是由“_”分开,我可以抓住它。 我不觉得我应该有,但它不停地给我jQuery的例外情况除外。 别人的东西用什么我会喜欢知道挣扎。



Answer 11:

试试这个功能:

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


文章来源: How do I add options to a DropDownList using jQuery?