jQuery를 사용하여 JavaScript 개체에서 선택한 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

jQuery를 사용하여 JavaScript 개체에서 선택한 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

입니까?<select>j를 Query'는 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');

이 방법은 보기에도 좋고 읽기 쉽지만 다른 방법보다 느립니다.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

속도가 필요한 경우 가장 빠른(테스트 완료!) 방법은 문자열 연결이 아닌 배열을 사용하고 추가 호출을 1개만 사용하는 것입니다.

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

테스트를 몇 번 해봤는데 이게 가장 빠른 것 같아요. :P

현재 jQuery core에 포함할 것을 제안하는 Microsoft Templating 접근 방식을 사용하는 방법이 있습니다.템플리트를 사용하면 더 강력한 성능을 얻을 수 있기 때문에 가장 간단한 시나리오에서는 최적의 옵션이 아닐 수 있습니다.자세한 내용은 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이를 위해서는 각 요소에 대해 append를 호출해야 하며 각 요소가 개별적으로 추가될 때 리플로우가 트리거됩니다.

을 보다 를 사용)으로하면, 「JS」를 할 수 .append 「」의 .option맵과 맵을 사용하여 작성된 요소Option요소 컨스트럭터

「」의 Option Function 필요가 .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, 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(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");

1. $.eacha보다 느리다for고리
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 는 1 회만 조작됩니다.

이것이 바로 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. 자바스크립트/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();
       }
   }
   

앞의 답변은 모두 유효한 답변입니다.이 모든 답변을 documentFragmnet에 추가한 후 문서 fragment를 요소로 추가하는 것이 좋습니다.

이 문제에 대한 존 레식의 생각을 보세요...

다음과 같은 것들이 있습니다.

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

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 성공 시 드롭다운에 값을 입력하기 위한 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
    }));
});

언급URL : https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-a-javascript-object-with-jq