옵션을 추가하는 가장 좋은 방법은 무엇입니까?<select>jQuery를 사용하여 JavaScript 개체에서?
나는 플러그인을 할 필요가없는 것을 찾고 있지만 거기에있는 플러그인에도 관심이있다.
이것이 내가 한 일이다.
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의 변경 사항 : (1) append () 내의 옵션에 대한 닫기 태그를 제거하고 (2) append ()의 두 번째 매개 변수로 속성 / 속성을 맵으로 이동했습니다.
jQuery 방식의 다른 답변과 동일합니다.
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$("#mySelect")var에, 그렇지 않으면 호출$("#mySelect")루프를 돌 때마다 DOM을 업데이트하는 것과 같이 매우 낭비 적입니다. 3 번과 6 번 지점을 참조하십시오.artzstudio.com/2009/04/jquery-performance-rules/… - Patrickvar mySelect = $("#mySelect") outside of the 각 루프. 그것은 훨씬 더 효율적일 것입니다. 아래 Carl의 답변보기 - Patrickattr과text실제로는$('<option/>')-목적 - Blauhirn
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 () 방법)
key일부 따옴표가 있거나>, <그 안에. - nickf
이것은 약간 더 빠르고 깨끗합니다.
$.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전에 개체. 모든 브라우저에 내장되어 있습니까? - Darryl Heinnew Option하지만 IE6에서는 작동하지 않는 것으로 나타났습니다. & 7. 이유가 없지만 전체 jQuery 옵션 중 상당수가 작동했습니다. - Darryl Heinnew Option('display', value, true) - boatcoder
사용DOM 요소 작성기 플러그인(내가 좋아하는 것):
$.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);
});
그건 완전히 크로스 브라우저 호환됩니다.
@ 조쉬 페리
평범한 것 같다..append예상대로 작동합니다.
$("mySelect").append(
$.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);
})
);
$.weakmap~을 허용하다GC - Chef_Codemap()재산,append()개체의 배열을 올바르게 추가하려면! - Jochem Schulenklopper
forwarned ... Android 2.2 (Cyanogen 7.0.1) 전화 (T-Mobile G2)에서 PhoneGap 1.0.0과 함께 jQuery Mobile 1.0b2를 사용하고 있으며 .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('');
몇 가지 테스트를 해봤는데이 작업이 가장 빠르다고 믿습니다. :피
이 방법을 사용하면Microsoft 템플릿 접근 방식그것은 현재 jQuery 코어에 포함시키기위한 제안하에있다. 템플리트를 사용하는 데 더 많은 능력이 있으므로 가장 간단한 시나리오의 경우 최상의 옵션이 아닐 수도 있습니다. 자세한 내용은 Scott Gu의 게시물에서 기능을 간략하게 설명합니다.
먼저 템플리트 화 js 파일을 포함하십시오.기둥.
<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");
나는했습니다블로깅 된이 접근 방법을 좀 더 자세히 설명합니다.
나는 이런 것을 만들었다.Ajax를 통해 드롭 다운 아이템로드하기. 위의 응답도 받아 들일 수 있지만 더 나은 성능을 위해 최대한 적은 DOM 수정 만 있으면 좋습니다.
따라서 루프 안에 각 항목을 추가하는 대신 루프 내에서 항목을 수집하고 완료되면 추가하는 것이 좋습니다.
$(data).each(function(){
... Collect items
})
추가,
$('#select_id').append(items);
또는 더 나은
$('#select_id').html(items);
"one-liner"에서 상위 두 답변 사이의 종류의 타협
$.fn.append.apply($('mySelect'),
$.map(selectValues, function(val, idx) {
return $("<option/>")
.val(val.key)
.text(val.value);
})
);
다음을 사용하여 Option 요소의 배열을 구성합니다.지도다음을 사용하여 모두 선택에 한 번에 추가합니다.apply각 Option을 별도의 인수로 보내려면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
Chrome (jQuery 1.7.1)에서이 솔루션의 정렬 문제가 있습니다 (Chrome은 이름 / 번호별로 객체 속성을 정렬합니다). 순서를 유지하려면 (예, 악용 사례), 이것을 변경했습니다.
optionValues0 = {"4321": "option 1", "1234": "option 2"};
이에
optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};
그러면 $. 각각의 모습은 다음과 같습니다.
$.each(optionValues0, function(order, object) {
key = object.id;
value = object.value;
$('#mySelect').append($('<option>', { value : key }).text(value));
});
그것을하는 또 다른 방법 :
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
$('#mySelect')그런 다음 리팩토링 된 @rocktheroad 답을 ... 무엇이든, 이것은보다 실제적인 해결책입니다. - Chef_Code
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; - vahanpwns
이전 답변은 모두 유효한 답변이지만 다음을 모두 documentFragmnet에 먼저 추가 한 다음 해당 문서 조각을 요소로 추가하는 것이 좋습니다.
만나다문제에 대한 존 레지그 (John Resig)의 생각...
의 라인을 따라 뭔가 :
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);
$.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? - Chris22
어디서나 동일한 코드를 반복하는 것이 아니라 다음과 같이 jQuery 함수를 작성하는 것이 더 바람직하다는 것을 제안합니다.
jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
그런 다음 옵션을 추가하려면 다음을 수행하십시오.
$('select').addOption('0', 'None');
다음 코드를 사용하여 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/.
나는 이것이 간단하고 훌륭하게 작동한다는 것을 알았다.
for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
이것이 2 차원 배열에서 한 것입니다. 첫 번째 열은 항목 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();
}
}
JSON 형식 :
[{
"org_name": "Asset Management"
}, {
"org_name": "Debt Equity Foreign services"
}, {
"org_name": "Credit Services"
}]
그리고 jQuery 코드를 사용하여 Ajax 성공시 Dropdown에 값을 채 웁니다.
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
}
$ .map () 함수를 사용하면보다 우아한 방법으로이 작업을 수행 할 수 있습니다.
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
$.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(''));
<!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>
value따옴표 붙일 필요가없는 문자열 (및 하드 코드)입니다. - Darryl Hein