[JQUERY] jQuery로 자바 스크립트 객체에서 선택하는 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

jQuery로 자바 스크립트 객체에서 선택하는 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

해결법

1. ---

   1.JQuery와 패션의 다른 답변과 동일 :

   JQuery와 패션의 다른 답변과 동일 :

   $.each(selectValues, function(key, value) {   
        $('#mySelect')
            .append($("<option></option>")
                       .attr("value", key)
                       .text(value)); 
   });
   

2. ---

   2.

   var output = [];
   
   $.each(selectValues, function(key, value)
   {
     output.push('<option value="'+ key +'">'+ value +'</option>');
   });
   
   $('#mySelect').html(output.join(''));
   

   이러한 방법으로 한 번만 "DOM을 눌러".

   내가 최근 라인이 $ ( '#의 mySelect')로 변환 할 수 아니에요 확인합니다. HTML (( '') output.join) 내가 jQuery를 내부를 모르기 때문에 (어쩌면는 HTML에서 몇 가지 분석을 수행 () 방법)

3. ---

   3.이것은 빠르고 청소기 약간이다.

   이것은 빠르고 청소기 약간이다.

   VAR selectValues ​​= { "1": "테스트 1" "2": "테스트 2" }; VAR $ mySelect = $ ( '#의 mySelect'); // {) .each (selectValues ​​함수 (키 값 달러 var에 $ 옵션 = $ ( "<옵션 />", { 값 : 키, 텍스트 : 값 }); $ mySelect.append ($ 옵션); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   ---

   4.

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

   ---

   5.당신은 오래된 IE 버전을 지원하지 않는 경우, 옵션 생성자를 사용하여 이동하는 방법, 읽을 수있는 효율적인 솔루션은 분명히 :

   당신은 오래된 IE 버전을 지원하지 않는 경우, 옵션 생성자를 사용하여 이동하는 방법, 읽을 수있는 효율적인 솔루션은 분명히 :

   $(new Option('myText', 'val')).appendTo('#mySelect');
   

   그것은 기능적으로 동등하지만 세척제 :

   $("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
   

   ---

   6.더 좋은이 외모는 가독성을 제공하지만 속도가 느린 다른 방법보다.

   더 좋은이 외모는 가독성을 제공하지만 속도가 느린 다른 방법보다.

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

   당신이 속도를 원하는 경우, 가장 빠른 (테스트!) 방법이 사용 배열이 아니라 문자열 연결, 단 하나의 APPEND 호출을 사용합니다.

   auxArr = [];
   $.each(selectData, function(i, option)
   {
       auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
   });
   
   $('#selectBox').append(auxArr.join(''));
   

   ---

   7.나이 @의 joshperry의 대답의 정제 :

   나이 @의 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
   );
   

   ---

   8.이러한 답변은 모두 불필요하게 복잡하게 보인다. 당신이 필요로하는 것입니다 :

   이러한 답변은 모두 불필요하게 복잡하게 보인다. 당신이 필요로하는 것입니다 :

   var options = $('#mySelect').get(0).options;
   $.each(selectValues, function(key, value) {
           options[options.length] = new Option(value, key);
   });
   

   즉 완전히 크로스 브라우저 호환됩니다.

   ---

   9.나는 안드로이드 2.2 (시안 7.0.1) 전화에 폰갭 1.0.0 (T- 모바일 G2)를 jQuery를 모바일 1.0b2을 사용하고 모두에서 작동하도록으로 .Append () 메소드를 가져올 수 없습니다 ... forwarned합니다. 나는 다음과 같은) (가 .html했다 :

   나는 안드로이드 2.2 (시안 7.0.1) 전화에 폰갭 1.0.0 (T- 모바일 G2)를 jQuery를 모바일 1.0b2을 사용하고 모두에서 작동하도록으로 .Append () 메소드를 가져올 수 없습니다 ... forwarned합니다. 나는 다음과 같은) (가 .html했다 :

   var options;
   $.each(data, function(index, object) {
       options += '<option value="' + object.id + '">' + object.stop + '</option>';
   });
   
   $('#selectMenu').html(options);
   

   ---

   10.

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

   나는 몇 가지 검사를 해봤이, 내가 생각, 가장 빠른 작업을 수행합니다. :피

   ---

   11.현재 jQuery를 코어에 포함을위한 제안에서의은 Microsoft 템플릿 방법을 사용하여 접근 방식이있다. 가장 간단한 시나리오는 최선의 선택되지 않을 수 있도록 템플릿을 사용하여 더 많은 전력이있다. 자세한 내용은 스콧 특별시의 게시물 기능을 요약을 참조하십시오.

   현재 jQuery를 코어에 포함을위한 제안에서의은 Microsoft 템플릿 방법을 사용하여 접근 방식이있다. 가장 간단한 시나리오는 최선의 선택되지 않을 수 있도록 템플릿을 사용하여 더 많은 전력이있다. 자세한 내용은 스콧 특별시의 게시물 기능을 요약을 참조하십시오.

   첫째는 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");
   

   좀 더 자세히이 방법을 블로그했습니다.

   ---

   12.나는 아약스를 통해 드롭 다운 항목을로드 같은 것을 만들었습니다. 위의 응답도 가능하지만, 가능한 한 성능 향상을 위해 약간의 DOM 수정으로 가지고하는 것이 좋다.

   나는 아약스를 통해 드롭 다운 항목을로드 같은 것을 만들었습니다. 위의 응답도 가능하지만, 가능한 한 성능 향상을 위해 약간의 DOM 수정으로 가지고하는 것이 좋다.

   그래서 오히려 루프 내에서이 수집 항목에 더 루프 내에서 각 항목을 추가하고이 완료 된 후에는 그것을 추가보다.

   $(data).each(function(){
       ... Collect items
   })
   

   그것을 추가

   $('#select_id').append(items); 
   

   또는 더 나은

   $('#select_id').html(items);
   

   ---

   13.간단한 방법은 다음과 같습니다

   간단한 방법은 다음과 같습니다

   $('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
   

   ---

   14.다른 답변의 대부분은 selectValues을 반복하는 각 기능을 사용합니다. 이 APPEND 각 요소에 호출 각각 개별적으로 추가 할 때 리플 로우가 트리거됩니다해야합니다.

   다른 답변의 대부분은 selectValues을 반복하는 각 기능을 사용합니다. 이 APPEND 각 요소에 호출 각각 개별적으로 추가 할 때 리플 로우가 트리거됩니다해야합니다.

   (현대 JS를 사용하여)보다 관용적 작용 방법이 응답은 업데이트지도 옵션 요소 생성자를 사용하여 생성 된 선택 소자의 배열, APPEND 회만 호출을 형성 할 수있다.

   옵션 요소를 생성하지 실행 jQuery의 구문 분석 로직이 필요 후 업데이트 할 필요가 없습니다 같은 옵션 DOM 요소를 사용하여 함수 호출 오버 헤드를 감소시켜야한다.

   $('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
   

   당신이 공장 유틸리티 기능을 할 경우에 더 단순화 할 수있는 새로운 옵션 객체까지 :

   const newoption = (...args) => new Option(...args)
   

   그런 다음이지도에 직접 제공 할 수 있습니다 :

   $('mySelect').append($.map(selectValues, newoption))
   

   이전 배합

   APPEND는 가변 인자로 값을 전달 할 수 있기 때문에,지도 옵션 요소의 목록을 미리 만들고 및 적용 사용하여 단일 호출에 인수로를 추가 할 수 있습니다.

   $.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)))
   

   ---

   15.

   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를 동적 선택 목록

   ---

   16.크롬 (jQuery를 1.7.1)에서이 솔루션 정렬 문제가있다 (크롬은 이름 / 번호로 개체 속성을 정렬?) 그래서 (예, 그것의 목적은 학대) 순서를 유지하기 위해,이 변경 :

   크롬 (jQuery를 1.7.1)에서이 솔루션 정렬 문제가있다 (크롬은 이름 / 번호로 개체 속성을 정렬?) 그래서 (예, 그것의 목적은 학대) 순서를 유지하기 위해,이 변경 :

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

   ---

   17.오히려 모든 곳에서 동일한 코드를 반복하는 것보다, 나는 같은 자신의 jQuery 함수를 작성하는 것이 더 바람직하다 건의 할 것입니다 :

   오히려 모든 곳에서 동일한 코드를 반복하는 것보다, 나는 같은 자신의 jQuery 함수를 작성하는 것이 더 바람직하다 건의 할 것입니다 :

   jQuery.fn.addOption = function (key, value) {
       $(this).append($('<option>', { value: key }).text(value));
   };
   

   그런 다음 옵션을 추가 바로 다음을 수행 :

   $('select').addOption('0', 'None');
   

   ---

   18.당신은 다음과 같은 코드를 사용하여 JSON 배열을 반복 할 수 있습니다

   당신은 다음과 같은 코드를 사용하여 JSON 배열을 반복 할 수 있습니다

   $ ( '<옵션 />') ATTR ( "값", "someValue와") 텍스트 ( "옵션 1") appendTo ( "# 내 --ID를 선택")...;

   ---

   19.이전 응답이 유효한 모든 답이 있지만 - 그 다음 APPEND, 먼저 documentFragmnet 모든이를 추가하는 것이 좋습니다 수 있습니다 그 이후 요소로 문서 조각은 ...

   이전 응답이 유효한 모든 답이 있지만 - 그 다음 APPEND, 먼저 documentFragmnet 모든이를 추가하는 것이 좋습니다 수 있습니다 그 이후 요소로 문서 조각은 ...

   문제에 존 레식의 생각을 참조하십시오 ...

   의 라인을 따라 뭔가 :

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

   ---

   20.가장 좋은 해결책은 다음이다 그래서

   가장 좋은 해결책은 다음이다 그래서

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

   ---

   21.그러나 그 일을하는 또 다른 방법 :

   그러나 그 일을하는 또 다른 방법 :

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

   ---

   22.

   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 한 번만 후 처음으로 거대한 문자열을 구축.

   ---

   23.그건 내가 2 차원 배열로 무슨 짓을했는지 : 첫 번째 열이 나는, <옵션>의 innerHTML을 추가 항목입니다. 두 번째 열 I에서, <선택>의 값에 추가 RECORD_ID된다 :

   그건 내가 2 차원 배열로 무슨 짓을했는지 : 첫 번째 열이 나는, <옵션>의 innerHTML을 추가 항목입니다. 두 번째 열 I에서, <선택>의 값에 추가 RECORD_ID된다 :

   ---

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

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

   ---

   25.나는이 간단하고 위대한 작품을 발견했다.

   나는이 간단하고 위대한 작품을 발견했다.

   for (var i = 0; i < array.length; i++) {
       $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
   };
   

   ---

   26.JSON 형식 :

   JSON 형식 :

   [{
       "org_name": "Asset Management"
   }, {
       "org_name": "Debt Equity Foreign services"
   }, {
       "org_name": "Credit Services"
   }]
   

   그리고 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
   }
   

   ---

   27.은 $ .MAP () 함수를 사용하면 더 우아한 방법으로이 작업을 수행 할 수 있습니다 :

   은 $ .MAP () 함수를 사용하면 더 우아한 방법으로이 작업을 수행 할 수 있습니다 :

   $('#mySelect').html( $.map(selectValues, function(val, key){
       return '<option value="' + val + '">'+ key + '</option>';
   }).join(''));
   

   ---

   28.

   <!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>
   

   ---

   29.아래 라인을 다음으로 HTML을 선택 ID를 설정합니다. 여기에서 mySelect는 선택 요소의 ID로 사용됩니다.

   아래 라인을 다음으로 HTML을 선택 ID를 설정합니다. 여기에서 mySelect는 선택 요소의 ID로 사용됩니다.

      var options = $("#mySelect");
   

   다음이 시나리오에서 selectValues이며, 각 루프에 대한 JQuery와로 설정 객체를 얻는다. 그것은 따라 개체의 값과 텍스트를 사용하고 다음과 옵션 선택에 그것을 추가 할 것이다.

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

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

   예.

   "1": "테스트 1" "2": "테스트 2"

   쓰러지 다,

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

   ---

   30.사실, 향상된 성능을 얻기 위해,이 ID를 선택하기 위해 별도로 APPEND 옵션 목록을 확인하는 것이 좋습니다.

   사실, 향상된 성능을 얻기 위해,이 ID를 선택하기 위해 별도로 APPEND 옵션 목록을 확인하는 것이 좋습니다.

   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/

   from https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-a-javascript-object-with-jq by cc-by-sa and MIT license

   'JQUERY' 카테고리의 다른 글

   [JQUERY] 어떻게 자바 스크립트를 사용하여 * .CSV 파일에서 데이터를 읽어?  (0)	2020.09.25
   [JQUERY] 자바 스크립트를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법은 무엇입니까?  (0)	2020.09.25
   [JQUERY] 어떻게 jQuery를 사용하여 "잠시 기다려주십시오로드 중 ..."애니메이션을 만들 수 있습니까?  (0)	2020.09.25
   [JQUERY] 사용자가 입력을 멈출 때까지 어떻게 .keyup () 핸들러를 지연?  (0)	2020.09.25
   [JQUERY] 어떻게 jQuery를 / 자바 스크립트로 JSON 데이터를 구문 분석?  (0)	2020.09.25

   ,

   Search