질문자 :Darryl Hein
jQuery를 사용하여 JavaScript 객체에서 <select> 옵션을 추가하는 가장 좋은 방법은 무엇입니까?
플러그인이 필요하지 않은 작업을 찾고 있지만 거기에 있는 플러그인에도 관심이 있습니다.
이것이 내가 한 일입니다.
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)); });
var output = []; $.each(selectValues, function(key, value) { output.push('<option value="'+ key +'">'+ value +'</option>'); }); $('#mySelect').html(output.join(''));
이런 식으로 한 번만 "DOM을 터치"합니다.
jQuery 내부를 모르기 때문에 최신 행을 $('#mySelect').html(output.join('')) 으로 변환할 수 있는지 확실하지 않습니다(아마도 html() 방법)
이것은 약간 더 빠르고 깨끗합니다.
var selectValues = { "1": "test 1", "2": "test 2" }; var $mySelect = $('#mySelect'); // $.each(selectValues, function(key, value) { var $option = $("<option/>", { value: key, text: value }); $mySelect.append($option); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="mySelect"></select>
제이쿼리
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)); }
이전 IE 버전을 지원할 필요가 없는 경우 Option 생성자를 사용하는 것이 명확하고 읽기 쉽고 효율적인 솔루션입니다 .
$(new Option('myText', 'val')).appendTo('#mySelect');
다음과 기능면에서 동일하지만 다음보다 깨끗합니다.
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
이것은 더 멋지게 보이고 가독성을 제공하지만 다른 방법보다 느립니다.
$.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(''));
이전 @joshperry의 답변 개선 :
일반 .append 도 예상대로 작동하는 것 같습니다.
$("#mySelect").append( $.map(selectValues, function(v,k){ return $("<option>").val(k).text(v); }) );
또는 더 짧은,
$("#mySelect").append( $.map(selectValues, (v,k) => $("<option>").val(k).text(v)) // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS );
이 모든 대답은 불필요하게 복잡해 보입니다. 필요한 것은 다음과 같습니다.
var options = $('#mySelect').get(0).options; $.each(selectValues, function(key, value) { options[options.length] = new Option(value, key); });
그것은 완전히 크로스 브라우저와 호환됩니다.
주의하세요... 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('');
나는 몇 가지 테스트를 수행했으며 이것이 가장 빠른 작업을 수행한다고 생각합니다. :NS
현재 jQuery 코어에 포함하도록 제안 중인 Microsoft 템플릿 접근 방식을 사용하는 접근 방식이 있습니다. 템플릿을 사용하면 더 강력한 기능이 있으므로 가장 간단한 시나리오에서는 최상의 옵션이 아닐 수 있습니다. 자세한 내용은 기능을 설명하는 Scott Gu의 게시물을 참조하세요.
먼저 github 에서 사용할 수 있는 템플릿 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);
간단한 방법은 다음과 같습니다.
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
다른 답변의 대부분은 each 함수를 사용하여 selectValues 를 반복합니다. 이를 위해서는 각 요소에 대해 추가를 호출해야 하며 각각이 개별적으로 추가될 때 리플로우가 트리거됩니다.
이 답변을 보다 관용적인 기능적 방법(현대 JS 사용)으로 업데이트하면 map 및 Option 요소 생성자를 사용하여 생성된 option 요소 배열을 append
Option DOM 요소를 사용하면 option 요소를 업데이트할 필요가 없고 jQuery의 구문 분석 로직을 실행할 필요가 없기 때문에 함수 호출 오버헤드를 줄여야 합니다.
$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
옵션 객체를 새로 생성할 팩토리 유틸리티 함수를 만들면 이것은 더 단순화할 수 있습니다.
const newoption = (...args) => new Option(...args)
map 에 직접 제공할 수 있습니다.
$('mySelect').append($.map(selectValues, newoption))
이전 제형
때문에 append 또한 가변 인자로 값을 전달 할 수 있습니다, 우리의 목록을 미리 만들고 수있는 option 요소 지도를 하고 사용하여 단일 호출에 인수로를 추가 apply .
$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));
이후 버전의 jQuery에서 append 도 배열 인수를 허용하는 것처럼 보이며 이는 다소 단순화될 수 있습니다.
$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))
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와 함께 동적 목록을 사용하는 방법에 대한 전체 기사를 보려면 다음을 방문하십시오.
MVC 및 jQuery를 사용한 동적 선택 목록
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는 다음과 같습니다.
$.each(optionValues0, function(order, object) { key = object.id; value = object.value; $('#mySelect').append($('<option>', { value : key }).text(value)); });
어디에서나 동일한 코드를 반복하는 것보다 다음과 같은 고유한 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");
$.each for 루프보다 느립니다.- 매번 DOM 선택은 루프에서 모범 사례가 아닙니다.
$("#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);
그것을 하는 또 다른 방법:
var options = []; $.each(selectValues, function(key, value) { options.push($("<option/>", { value: key, text: value })); }); $('#mySelect').append(options);
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을 한 번만 조작합니다.
이것이 내가 2차원 배열로 한 일입니다. 첫 번째 열은 항목 i이고 <option> innerHTML 에 추가합니다. 두 번째 열은 record_id i이며 <option> value 에 추가합니다.
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);
자바스크립트/아약스
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(); } }
이전 답변은 모두 유효한 답변이지만 먼저 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);
나는 이것이 간단하고 훌륭하게 작동한다는 것을 알았습니다.
for (var i = 0; i < array.length; i++) { $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID)); };
JSON 형식:
[{ "org_name": "Asset Management" }, { "org_name": "Debt Equity Foreign services" }, { "org_name": "Credit Services" }]
Ajax 성공 시 드롭다운에 값을 채우는 jQuery 코드:
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(''));
<!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>
나는 두 가지 최고의 답변을 훌륭한 답변으로 결합합니다.
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(''));
$.each(selectValues, function(key, value) { $('#mySelect').append($("<option/>", { value: key, text: value })); });
출처 : http:www.stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-a-javascript-object-with-jq