에 옵션을 추가하는 가장 좋은 방법은 무엇입니까?<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));
}); var output = [];
$.each(selectValues, function(key, value) {
output.push('<option value="'+ key +'">'+ value +'</option>'); });
$('#mySelect').html(output.join('')); 이렇게 하면 DOM을 한 번만 터치할 수 있습니다.
최신 행을 $(‘#mySelect’).html(output.join(“”))로 변환할 수 있을지 모르겠습니다.jQuery internal을 모르기 때문입니다(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>j쿼리
var list = $("#selectList"); $.each(items, function(index, item) {
list.append(new Option(item.text, item.value)); }); Vanilla JavaScript
var list = document.getElementById("selectList"); for(var i in items) {
list.add(new Option(items[i].text, items[i].value)); } 오래된 IE 버전을 지원할 필요가 없다면 컨스트럭터를 사용하는 것이 읽기 쉽고 효율적인 솔루션입니다.
$(new Option('myText', 'val')).appendTo('#mySelect'); 기능적으로는 다음과 같으나, 보다 깔끔합니다.
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');