[JQUERY] 어떻게 jQuery를 함께 <선택>의 옵션을 변경하려면?

어떻게 jQuery를 함께 <선택>의 옵션을 변경하려면?

해결법

1. ---

   1.당신은 당신의 새로운 옵션을 추가 한 후 빈 방법을 사용하여 기존의 옵션을 제거 할 수 있습니다 :

   당신은 당신의 새로운 옵션을 추가 한 후 빈 방법을 사용하여 기존의 옵션을 제거 할 수 있습니다 :

   var option = $('<option></option>').attr("value", "option value").text("Text");
   $("#selectId").empty().append(option);
   

   당신은 당신이 할 수있는 객체에 새로운 옵션이있는 경우 :

   var newOptions = {"Option 1": "value1",
     "Option 2": "value2",
     "Option 3": "value3"
   };
   
   var $el = $("#selectId");
   $el.empty(); // remove old options
   $.each(newOptions, function(key,value) {
     $el.append($("<option></option>")
        .attr("value", value).text(key));
   });
   

   편집 : 0보다 인덱스보다 모든 옵션 요소를 얻고 그들을 제거,있다 선택 : 모든 옵션하지만 첫 번째를 제거하기 위해, 당신은 사용할 수 있습니다 :

   $('#selectId option:gt(0)').remove(); // remove all options, but not the first 
   

2. ---

   2.나는 빠른 jQuery를 확장에 CMS의 훌륭한 답을 던졌다 :

   나는 빠른 jQuery를 확장에 CMS의 훌륭한 답을 던졌다 :

   (function($, window) {
     $.fn.replaceOptions = function(options) {
       var self, $option;
   
       this.empty();
       self = this;
   
       $.each(options, function(index, option) {
         $option = $("<option></option>")
           .attr("value", option.value)
           .text(option.text);
         self.append($option);
       });
     };
   })(jQuery, window);
   

   그것은 "텍스트"및 "값"키를 포함하는 오브젝트의 배열을 기대하고있다. 다음과 같이 그래서 사용법은 다음과 같습니다

   var options = [
     {text: "one", value: 1},
     {text: "two", value: 2}
   ];
   
   $("#foo").replaceOptions(options);
   

3. ---

   3.

   $('#comboBx').append($("<option></option>").attr("value",key).text(value));
   

   어디 콤보 상자 당신의 콤보 ID입니다.

   또는 당신은 이미 기존의 innerHTML을에 문자열로 옵션을 추가 한 다음 선택 innerHTML을 할당 할 수 있습니다.

   편집하다

   다른 모든를 첫 번째 옵션을 유지하고 제거해야하는 경우에 당신은 사용할 수 있습니다

   var firstOption = $("#cmb1 option:first-child");
   $("#cmb1").empty().append(firstOption);
   

4. ---

   4.어떤 이상한 이유로이 부분에 대한

   어떤 이상한 이유로이 부분에 대한

   $el.empty(); // remove old options
   

   CMS에서 솔루션은 나를 위해 작동, 그래서 대신 단순히이 사용했다고하지 않았다

   el.html(' ');
   

   그리고 그것은 작품입니다. 내 작업 코드는 지금과 같은 그래서 :

   var newOptions = {
       "Option 1":"option-1",
       "Option 2":"option-2"
   };
   
   var $el = $('.selectClass');
   $el.html(' ');
   $.each(newOptions, function(key, value) {
       $el.append($("<option></option>")
       .attr("value", value).text(key));
   });
   

5. ---

   5.분리 및 DOM 요소를 추가하는 것은 기존의 변형보다 느리다.

   분리 및 DOM 요소를 추가하는 것은 기존의 변형보다 느리다.

   당신의 옵션 세트가 같은 길이가있는 경우, 당신은 이런 식으로 뭔가를 할 수 있습니다 :

   $('#my-select option')
   .each(function(index) {
       $(this).text('someNewText').val('someNewValue');
   });
   

   새 옵션 세트가 서로 다른 길이가 경우에, 당신은 몇 가지 기술은 위에서 설명한 사용, 당신이 정말로 필요 비어있는 옵션을 추가 / 삭제할 수 있습니다.

6. ---

   6.예를 들어 HTML 코드는이 코드를 포함하는 경우 :

   예를 들어 HTML 코드는이 코드를 포함하는 경우 :

   <select id="selectId"><option>Test1</option><option>Test2</option></select>
   

   당신의 선택 내부 옵션의 목록을 변경하려면이 코드를 넣고 사용할 수 있습니다. 때 이름이 명명 된 selectId를 선택합니다.

   var option = $('<option></option>').attr("value", "option value").text("Text");
   $("#selectId").html(option);
   

   이 예에서 난 단지 하나의 새로운 옵션으로 옵션의 이전 목록을 변경 위.

7. ---

   7.이 도움말을합니까?

   이 도움말을합니까?

   $("#SelectName option[value='theValueOfOption']")[0].selected = true;
   

8. ---

   8.손으로 일을하는 오래된 학교는 항상 나를 위해 좋은되었습니다.

   손으로 일을하는 오래된 학교는 항상 나를 위해 좋은되었습니다.

   이 솔루션은 아약스 작업에 이상적이며, 데이터베이스에서 JSON에 응답합니다.

9. ---

   9.우리가 업데이트하면 <선택> 지속적으로 우리는 이전 값을 저장해야합니다 :

   우리가 업데이트하면 <선택> 지속적으로 우리는 이전 값을 저장해야합니다 :

   var newOptions = {
       'Option 1':'value-1',
       'Option 2':'value-2'
   };
   
   var $el = $('#select');
   var prevValue = $el.val();
   $el.empty();
   $.each(newOptions, function(key, value) {
      $el.append($('<option></option>').attr('value', value).text(key));
      if (value === prevValue){
          $el.val(value);
      }
   });
   $el.trigger('change');
   

from https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery by cc-by-sa and MIT license