Каков наилучший способ добавления параметров в <select>
из объекта JavaScript с помощью jQuery?
Я ищу что-то, что мне не нужен плагин, но я также буду заинтересован в плагинах, которые там есть.
Это то, что я сделал:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Чистое/простое решение:
Это очищенная и упрощенная версия версии matdumsa:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Изменения в matdumsa's: (1) удалили тег close для опции внутри append() и (2) перенесли свойства/атрибуты на карту в качестве второго параметра append().
Как и другие ответы, в режиме jQuery:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$("#mySelect")
, иначе вызов $("#mySelect")
каждый раз внутри цикла очень расточителен, как и обновление DOM. Смотрите пункты № 3 и № 6 на artzstudio.com/2009/04/jquery-performance-rules/…
var output = [];
$.each(selectValues, function(key, value)
{
output.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#mySelect').html(output.join(''));
Таким образом, вы "касаетесь DOM" только один раз.
Я не уверен, что последняя строка может быть преобразована в $('# mySelect'). Html (output.join('')), потому что я не знаю внутренних компонентов jQuery (возможно, он выполняет некоторый разбор в html() метод)
Забастовкa >
Это немного быстрее и чище.
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key,
text: value
}));
});
var list = $("#selectList");
$.each(items, function(index, item) {
list.append(new Option(item.text, item.value));
});
var list = document.getElementById("selectList");
for(var i in items) {
list.add(new Option(items[i].text, items[i].value));
}
Option
. Это встроено во все браузеры?
Использование Плагин DOM Elements Creator (мой любимый):
$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');
Использование конструктора Option
(не уверен в поддержке браузера):
$(new Option('myText', 'val')).appendTo('#mySelect');
Использование document.createElement
(избегая дополнительной обработки синтаксического анализа HTML с помощью $("<option></option>")
):
$('#mySelect').append($(document.createElement("option")).
attr("value","val").text("myText"));
Это выглядит лучше, обеспечивает читаемость, но медленнее, чем другие методы.
$.each(selectData, function(i, option)
{
$("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});
Если вам нужна скорость, самым быстрым (проверенным!) способом является использование массива, а не конкатенация строк и использование только одного вызова для добавления.
auxArr = [];
$.each(selectData, function(i, option)
{
auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});
$('#selectBox').append(auxArr.join(''));
Все эти ответы кажутся излишне сложными. Все что вам нужно:
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
Это полностью совместимо с браузером.
new Option(value, key);
? Порядок параметров - Параметры (text_visible_part, value_behind_the_scenes).
@joshperry
Кажется, что обычный .append также работает, как ожидалось,
$("mySelect").append(
$.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);
})
);
$.weakmap
для GC
map()
сочетании со свойством append()
для правильного добавления массива объектов!
Будьте предупреждены... Я использую jQuery Mobile 1.0b2 с PhoneGap 1.0.0 на телефоне Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) и не смог получить метод .append() для работы на все. Мне пришлось использовать .html(), как показано ниже:
var options;
$.each(data, function(index, object) {
options += '<option value="' + object.id + '">' + object.stop + '</option>';
});
$('#selectMenu').html(options);
var output = [];
var length = data.length;
for(var i = 0; i < length; i++)
{
output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
}
$('#choose_schedule').get(0).innerHTML = output.join('');
Я сделал несколько тестов, и это, я считаю, делает работу самой быстрой.: P
Существует подход, использующий подход Microsoft Templating, который в настоящее время находится в предложении для включения в ядро jQuery. Там больше возможностей в использовании шаблонов, поэтому для простейшего сценария это может быть не самый лучший вариант. Более подробную информацию см. В статье Scott Gu, в которой излагаются особенности.
Сначала включите файл шаблонов js, доступный из github.
<script src="Scripts/jquery.tmpl.js" type="text/javascript" />
Следующая настройка шаблона
<script id="templateOptionItem" type="text/html">
<option value=\'{{= Value}}\'>{{= Text}}</option>
</script>
Затем ваши данные вызовите метод .render()
var someData = [
{ Text: "one", Value: "1" },
{ Text: "two", Value: "2" },
{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");
У меня blogged этот подход более подробно.
Я сделал что-то вроде этого, загружая выпадающий элемент через Ajax. Ответ выше также является приемлемым, но всегда полезно иметь как можно меньшую модификацию DOM для повышения производительности.
Вместо того, чтобы добавлять каждый элемент внутри цикла, лучше собрать элементы в цикле и добавить его после его завершения.
$(data).each(function(){
... Collect items
})
Добавьте его,
$('#select_id').append(items);
или даже лучше
$('#select_id').html(items);
Компромисс между двумя верхними ответами в "одном слое":
$.fn.append.apply($('mySelect'),
$.map(selectValues, function(val, idx) {
return $("<option/>")
.val(val.key)
.text(val.value);
})
);
Создает массив элементов Option, используя map, а затем добавляет их все в Select сразу, используя apply
для отправки каждый параметр как отдельный аргумент функции append
.
Простым способом является:
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
function populateDropdown(select, data) {
select.html('');
$.each(data, function(id, option) {
select.append($('<option></option>').val(option.value).html(option.name));
});
}
Это хорошо работает с jQuery 1.4.1.
Для полной статьи для использования динамических списков с ASP.NET MVC и jQuery посетите: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx
Вместо того, чтобы повторять один и тот же код во всем мире, я бы предположил, что более желательно написать собственную функцию jQuery, например:
jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
Затем, чтобы добавить параметр, выполните следующие действия:
$('select').addOption('0', 'None');
$.each
медленнее, чем цикл for
$("#mySelect").append();
Таким образом, лучшим решением является следующее
Если данные JSON resp
[
{"id":"0001", "name":"Mr. P"},
{"id":"0003", "name":"Mr. Q"},
{"id":"0054", "name":"Mr. R"},
{"id":"0061", "name":"Mr. S"}
]
используйте его как
var option = "";
for (i=0; i<resp.length; i++) {
option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
emp_id
?
if (data.length != 0) {
var opts = "";
for (i in data)
opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";
$("#myselect").empty().append(opts);
}
Это манипулирует DOM только один раз после создания гигантской строки.
$("#myselect").empty().append(opts);
с getElementById('myselect').innerHtml = opts;
Еще один способ сделать это:
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
$('#mySelect')
затем реорганизовали ответ @rocktheroad ... как бы то ни было, это более практичное решение
Несмотря на то, что предыдущие ответы являются действительными ответами - возможно, сначала добавить все это в документFragmnet, а затем добавить этот фрагмент документа в качестве элемента после...
См. Джона Резига по этому поводу...
Что-то по строкам:
var frag = document.createDocumentFragment();
for(item in data.Events)
{
var option = document.createElement("option");
option.setAttribute("value", data.Events[item].Key);
option.innerText = data.Events[item].Value;
frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
Проблема с этим решением в Chrome (jQuery 1.7.1) (сортирует свойства объекта по имени/номеру?) Таким образом, чтобы сохранить порядок (да, это объект злоупотребления), я изменил это:
optionValues0 = {"4321": "option 1", "1234": "option 2"};
к этому
optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};
а затем $.each будет выглядеть так:
$.each(optionValues0, function(order, object) {
key = object.id;
value = object.value;
$('#mySelect').append($('<option>', { value : key }).text(value));
});
Вы можете просто перебрать ваш json-массив со следующим кодом
$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
Плагин jQuery можно найти здесь: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/.
Формат JSON:
[{
"org_name": "Asset Management"
}, {
"org_name": "Debt Equity Foreign services"
}, {
"org_name": "Credit Services"
}]
И код jQuery для заполнения значений в раскрывающемся списке Ajax:
success: function(json) {
var options = [];
$('#org_category').html(''); // Set the Dropdown as Blank before new Data
options.push('<option>-- Select Category --</option>');
$.each(JSON.parse(json), function(i, item) {
options.push($('<option/>',
{
value: item.org_name, text: item.org_name
}));
});
$('#org_category').append(options); // Set the Values to Dropdown
}
Что я сделал с двумерными массивами: первый столбец - это элемент i, добавьте к innerHTML
в <option>
. Второй столбец - record_id i, добавьте к value
<option>
:
PHP
$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
$first_name = $item->first_name;
$last_name = $item->last_name;
$date = $item->date;
$show = $first_name . " " . $last_name . ", " . $date;
$request_id = $request->request_id;
$items_arr[0][$i] = $show;
$items_arr[1][$i] = $request_id;
$i++;
}
echo json_encode($items_arr);
JavaScript/Ajax
function ddl_items() {
if (window.XMLHttpRequest) {
// Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
xmlhttp=new XMLHttpRequest();
}
else{
// Code for Internet Explorer 6 and Internet Explorer 5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var arr = JSON.parse(xmlhttp.responseText);
var lstbx = document.getElementById('my_listbox');
for (var i=0; i<arr.length; i++) {
var option = new Option(arr[0][i], arr[1][i]);
lstbx.options.add(option);
}
}
};
xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
xmlhttp.send();
}
}
Я обнаружил, что это просто и отлично работает.
for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
Используя функцию $.map(), вы можете сделать это более элегантным способом:
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
Поскольку JQuery append
может принимать массив в качестве аргумента, я удивлен, что никто не предлагал сделать это однострочным с map
.
$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));
На самом деле, для получения улучшенной производительности лучше составить список опций отдельно и добавить идентификатор.
var options = [];
$.each(selectValues, function(key, value) {
options.push ($('<option>', { value : key })
.text(value));
});
$('#mySelect').append(options);
Я решил перезвонить немного.
multiple
свойствами при добавлении дополнительных параметров
// objects as value/desc
let selectValues = {
"1": "test 1",
"2": "test 2",
"3": "test 3",
"4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');
// array of objects called "options" in an object
let selectValuesNew = {
options: [{
value: "1",
description: "2test 1"
},
{
value: "2",
description: "2test 2",
selected: true
},
{
value: "3",
description: "2test 3"
},
{
value: "4",
description: "2test Four"
}
]
};
//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
opts2.append($('<option />')
.prop("value", val.value)
.prop("selected", val.selected)
.text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
<option value="" selected="selected">empty</option>
</select>
<select id="mySelectNew" multiple="multiple">
<option value="" selected="selected">2empty</option>
</select>
Установите свой идентификатор выбора HTML в следующую строку ниже. Здесь mySelect
используется как идентификатор элемента select.
var options = $("#mySelect");
затем получить объект, который является selectValues в этом сценарии, и устанавливает его в jquery для каждого цикла. Он будет использовать значение и текст объектов соответственно и добавляет его в опции выбора следующим образом.
$.each(selectValues, function(val, text) {
options.append(
$('<option></option>').val(val).html(text)
);
});
Это отобразит текст в качестве списка опций при выборе выпадающего списка и после выбора текста выбранное значение будет использоваться.
Eg.
"1": "тест 1", "2": "тест 2",
Выпадающее,
отображаемое имя: test 1 → значение равно 1 отображаемое имя: тест 2 → значение 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>append selectbox using jquery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setprice(){
var selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
</script>
</head>
<body onload="setprice();">
<select class="form-control" id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key, text: value
}));
});
Я совмещаю два лучших ответа в отличный ответ.
var outputConcatenation = [];
$.each(selectValues, function(i, item) {
outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});
$("#myselect").html(outputConcatenation.join(''));