[javascript] jQuery를 사용하여 JavaScript 객체로 선택 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

<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을 터치”하십시오.


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>

스 니펫 확장

답변

jQuery

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
);