web-dev-qa-db-ja.com

jQueryを使ってDropDownListにオプションを追加する方法を教えてください。

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

ありがとう

jqueryuser-interfacedrop-down-menu
289
flesh

追加のプラグインを使わずに

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は速度向上のための良いオプションですが、IE6とIE7はそれをサポートしていないのでdocument.createElement('option')を使ってオプション要素を作成することはできません。

できることは、新しい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を一度だけ修正します。

450
nickf

プラグインがなくても、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) );
161
Phrogz

プラグインで： jQuery選択ボックス 。あなたはこれを行うことができます：

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

最初にDropDownをクリアしたい場合があります$（ '＃DropDownQuality'）。empty（）;

私はMVCの私のコントローラーに一つのアイテムだけを含む選択リストを返させました。

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

開始時にリストに項目を追加する

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

最後にリストに項目を追加する

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

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

7
Zakaria

注意してください。@ Phrogzの解決策はIE 8では機能しませんが、@ nickfはすべての主要ブラウザで機能します。別のアプローチは：

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

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

3
Johan

直接使用できます

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

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

3
Jay

あなたが使用できるjqueryを使用する

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

「myid」はドロップダウンリストのid、newvalueは挿入したいテキストです。

0
chopss

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

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、あるいはそのようなものを私の第2の.each()で使うことができなかったのはばかげていました。追加します。幸い、ドロップダウンのIDは "_"で区切られていて、つかむことができました。私は私がしなければならないとは思わないが、そうでなければ私にjQuery例外を与え続けた。私がいたことに苦しんでいる他の人が知っているのを楽しむかもしれません。

0
vapcguy