jQuery를 사용하여 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
);

이 모든 대답은 불필요하게 복잡해 보입니다. 필요한 것은 다음과 같습니다.

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

나는 몇 가지 테스트를 수행했으며 이것이 가장 빠른 작업을 수행한다고 생각합니다. :피

Microsoft Templating 방식을 사용하는 방식이 있습니다현재 jQuery 코어에 포함시키기 위해 제안 된 을 . 템플릿을 사용하는 데 더 많은 권한이 있으므로 가장 간단한 시나리오에서는 최상의 옵션이 아닐 수 있습니다. 자세한 내용은 기능에 대한 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 . 이를 위해서는 각 요소에 대해 추가를 호출해야하며 각 요소를 개별적으로 추가 할 때 리플 로우가 트리거됩니다.

map 과 element 생성자를 사용하여 생성 된 요소 append배열을 option사용하여 한 번만 호출하도록 더 현대적인 기능적 방법 (현대 JS 사용)으로이 답변을 업데이트 할 수 있습니다 .Option

OptionDOM 요소를 사용하면 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");

이전 답변은 모두 유효한 답변이지만 먼저이 모든 것을 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);

1. $.eachfor루프 보다 느리다
2. 매번 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입니다.에 추가 innerHTML하십시오 <option>. 두 번째 열은 record_id i value입니다 <option>.

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

2. 자바 스크립트 / 아약스

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

JQuery와 플러그인은 여기에서 볼 수 있습니다 : jQuery를 & AJAX를 사용하여 선택 박스를 자동 채우기 .

나는 이것이 간단하고 훌륭하게 작동한다는 것을 알았습니다.

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 성공시 Dropdown에 값을 채우는 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>

HTML 선택 ID를 아래 행으로 설정하십시오. 여기서는 mySelectselect 요소의 id로 사용됩니다.

   var options = $("#mySelect");

그런 다음이 시나리오에서 selectValues ​​객체를 가져 와서 각 루프의 jquery로 설정하십시오. 그에 따라 객체의 값과 텍스트를 사용하고 다음과 같이 옵션 선택에 추가합니다.

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

드롭 다운 목록을 선택하면 텍스트가 옵션 목록으로 표시되고 텍스트가 선택되면 선택한 텍스트의 값이 사용됩니다.

예 :

"1": "test 1", "2": "test 2",

쓰러지 다,

표시 이름 : 테스트 1-> 값은 1 표시 이름 : 테스트 2-> 값은 2

실제로 성능을 향상 시키려면 옵션 목록을 별도로 작성하고 선택 ID에 추가하는 것이 좋습니다.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/