jQueryを使用してDropDownListにオプションを追加するにはどうすればよいですか？

質問のとおり、jQueryを使用してDropDownListに新しいオプションを追加するにはどうすればよいですか？

ありがとう

追加のプラグインを使用せずに、

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）を今すぐ選択する必要があるかどうかを指定する場合は、さらに2つのパラメーターを渡すことができます。

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

プラグインの場合：jQuery Selection Box。あなたはこれを行うことができます：

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

最初にDropDownをクリアしたいかもしれません$（ '＃DropDownQuality'）。empty（）;

MVCのコントローラーに、項目が1つしかない選択リストを返しました。

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

最初にリストにアイテムを追加

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

最後にリストにアイテムを追加

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

jQueryを使用した一般的なドロップダウン操作（取得、設定、追加、削除）

@PhrogzのソリューションはIE 8では機能しませんが、@ nickfはすべての主要なブラウザーで機能します。別のアプローチは：

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

Uは直接使用できます

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

->ここで直接文字列を使用できます

また、.prepend（）を使用して、オプションをオプションリストの先頭に追加します。 http://api.jquery.com/prepend/

使用できるjqueryを使用して

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

ここで、「myid」はドロップダウンリストのIDであり、newvalueは挿入するテキストです。

ページにドロップダウンがあったのと同じ数のオプションをドロップダウンに追加する必要がありました。だから私はそれをこのように使用しました：

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番目のドロップダウンがボックスに「2」を取得した、など）。

私が使えなかったりthis、this.Objectまたは$.obj私の第二のそのようなか何か.each()私は実際にそのオブジェクトの特定のIDを取得し、取得し、それを追加します前に、私の関数にそのオブジェクト全体を渡すために持っていた---けれども、。幸い、私のドロップダウンのIDは「_」で区切られていて、それを取得できました。私は私がしなければならなかったはずだとは思わないが、それ以外の場合はjQuery例外を与え続けた。他の人が私が何をしていたかと苦労して知っているのを楽しむかもしれません。

あなたの応答が「successData」だとしましょう。これには、ドロップダウンメニューのオプションとして追加する必要があるリストが含まれます。

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

これはあなたのために働くでしょう...

この関数を試してください：

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