298

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

ありがとう

4

12 に答える 12

455

余分なプラグインを使わずに、

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

多くのオプションがある場合、またはこのコードを非常に頻繁に実行する必要がある場合は、不必要に DOM を何度も変更するのではなく、 DocumentFragmentの使用を検討する必要があります。ほんの一握りのオプションについては、それだけの価値はないと思います。

- - - - - - - - - - - - - - - - 追加した - - - - - - - - - --------------

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 を 1 回だけ変更します。

于 2008-11-25T11:52:54.140 に答える
170

プラグインを使用しない場合は、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) );
于 2010-03-31T13:00:14.410 に答える
14

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

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false);
于 2008-11-25T11:47:27.147 に答える
13

最初にドロップダウンをクリアすることをお勧めします $('#DropDownQuality').empty();

MVC のコントローラーに、項目が 1 つだけの選択リストを返すようにしました。

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));
于 2012-01-23T20:42:21.060 に答える
7

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

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

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

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

jQuery を使用した一般的なドロップダウン操作 (Get、Set、Add、Remove)

于 2015-04-30T12:06:50.297 に答える
4

@Phrogz のソリューションは IE 8 では機能しないことに注意してください。一方、@nickf のソリューションはすべての主要なブラウザーで機能します。別のアプローチは次のとおりです。

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});
于 2011-08-22T01:15:10.287 に答える
3

Uは直接使用できます

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

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

于 2010-09-20T09:14:41.770 に答える
3

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

于 2012-03-29T05:51:08.480 に答える
0

あなたが使用できるjqueryを使用して

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

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

于 2014-11-12T09:44:20.017 に答える
0

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

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」を取得するなど)。

2nd でthisor this.Objector orを使用できないのはばかげていましたが、実際にはそのオブジェクトの特定の ID を取得し、そのオブジェクト全体を取得して関数に渡してから追加する必要がありました。幸いなことに、ドロップダウンの ID は「_」で区切られていたので、取得できました。そうしなければならなかったとは思いませんが、それ以外の場合はjQueryの例外が発生し続けました。私が知っていることを楽しむかもしれないことに苦労している他の何か。$.obj.each()

于 2014-11-20T02:37:33.873 に答える
0

あなたの応答が「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)
        );
    });
} }

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

于 2020-02-10T03:48:35.560 に答える
-1

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

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
于 2011-04-19T12:34:15.423 に答える