Кто-нибудь знает о методе, чтобы программно создать список выбора HTML, включая параметры с помощью JQuery?
Программно создавать список выбора
Ответ 1
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));
});
Ответ 2
var s = $('<select/>');
var o = [1, 2, 3];
for (var i in o) {
s.append($('<option/>').html(o[i]));
}
$('body').append(s);
Ответ 3
Я знаю, что это старо, но что эй:
$selectBox.html($.map(myArray, function(){
return $('<option/>', {text: this});
}));
Ответ 4
Это очень просто:
var selectList = "<select name='numbers'>";
for (var x = 0; x < 10; x++) {
selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
Ответ 5
Если у вас уже есть <select> список где-то в DOM, используйте его повторно и сделайте его пустым от предыдущих взаимодействий с пользователем...
// 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));
});
Ответ 6
Вот вариант, основанный на предыдущих ответах в этой теме, где все, кроме опций select-input, могут быть указаны через входной 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]));
}
Ответ 7
Вот еще одна версия ответа на вопрос, использующая ajax для получения ответа json, используемого для создания списка выбора с парами ключ-значение
$.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));
});
}
});
Ответ 8
Я думаю, что это проще. ИМХО.
arr.map(x => ($("YOUR SELECTOR").append('<option value="${x}">${x}</option>')));