web-dev-qa-db-ja.com

プログラムで選択リストを作成する

JQueryを使用したオプションを含むHTML選択リストをプログラムで作成する手法を知っている人はいますか？

jqueryselectlist
38
sisko
var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'}
];

var sel = $('<select>').appendTo('body');
$(arr).each(function() {
 sel.append($("<option>").attr('value',this.val).text(this.text));
});
103
js1568
var s = $('<select/>');
var o = [1, 2, 3];
for (var i in o) {
    s.append($('<option/>').html(o[i]));
}
$('body').append(s);
12
rid

私はこれが古いことを知っていますが、ちょっと：

$selectBox.html($.map(myArray, function(){
    return $('<option/>', {text: this});
}));
6
rikAtee

これは非常に簡単です。

var selectList = "<select name='numbers'>";
for (var x = 0; x < 10; x++) {
    selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
5
Nathan Anderson

キーと値のペアを含む選択リストを作成するために使用されるJSON応答を取得するためにajaxを使用する質問に対する回答の別のバージョンを次に示します

        $.ajax({
        type: 'post',
        url: 'include/parser.php',
        data: {                     
            mode: 'getSubtypes',
            type: type
        },
        success: function (response) {
            var mySubtype = document.getElementById("Component");
            var components = $.parseJSON(response);

            var selectList = document.createElement("select");
            selectList.id = "subtype";
            selectList.name = "subtype";
            mySubtype.appendChild(selectList);
            $('#subtype').append('<option value="">Select ...</option>');
            $.each(components, function(k, v) {
                var option = new Option(v, k); 
                $('#subtype').append($(option));               
            });
        }
    });
0
Mike Volmar

このスレッドの以前の回答に基づいたバリエーションがあります-select-input options以外はすべて、入力JSONオブジェクトを介して指定できます。

そのJSON入力でオプション配列を何らかの方法で指定できるかどうかを確認するのは興味深いでしょうか？

    var fruitListProfile = {
        id : someKey,
        class : 'fruit_list',
        style : 'margin-right: 20px; '
    };

    var selectInput = $('<select/>', fruitListProfile);

    var fruitOptions = ['Apple', 'cherry', 'kiwi'];
    for (var i in fruitOptions) {
        selectInput.append($('<option/>').html(fruitOptions[i]));
    }
0
Gene Bo

もっとシンプルだと思う.

 arr.map(x => ($("YOUR SELECTOR").append(`<option value="${x}">${x}</option>`)));
0
Denis Lightman

DOMのどこかにすでに<select>リストがある場合は、それを再利用して、以前のユーザーインタラクションから空にします...

// Call existing list, chain empty()
var my_list = $("#my_list").empty();

// Build list
$(my_arr).each(function() {
 my_list.append($(<option>").attr(\'value\',this.item_id).text(this.item_name));
});
0
K.Alex