user-interface select - 如何使用jQuery將選項添加到DropDownList?




option set (10)

如問題所述,如何使用jQuery將新選項添加到DropDownList?

謝謝


Answers

不使用任何額外的插件,

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不支持它。

我們可以做的是,創建一個新的select元素,然後附加所有選項。 一旦循環完成,將其追加到實際的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) );


使用jQuery你可以使用

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

其中“ myid ”是下拉列表的IDnewvalue是要插入的文本。


試試這個功能:

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

你可以直接使用

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

- >這裡你可以使用直接字符串


Pease note @ Phrogz的解決方案在IE 8中不起作用,而@ nickf在所有主流瀏覽器中均可使用。 另一種方法是:

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

我需要添加盡可能多的下拉選項,因為我的網頁上有下拉菜單。 所以我以這種方式使用它:

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”等)。

很荒謬的是,我不能在我的第二個.each()使用thisthis.Object$.obj或類似的東西 - 儘管---我實際上必須獲取該對象的特定ID,然後抓取並傳遞整個對像到我的函數之前它會追加。 幸運的是,我的下拉列表的ID由“_”分隔,我可以抓住它。 我覺得我不應該這樣做,但它一直給我jQuery例外,否則。 其他人正在為我的所作所為而苦苦掙扎。



我遇到了完全相同的問題。 我有一個ASP.NET複選框

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

在jQuery代碼中,我使用以下選擇器來檢查是否選中了複選框,它似乎像魅力一樣工作。

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

我相信你也可以使用ID而不是CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

我希望這可以幫助你。







jquery user-interface drop-down-menu