복붙노트

[JQUERY] jQuery를 사용하여 <선택>에 옵션을 추가?

JQUERY

jQuery를 사용하여 <선택>에 옵션을 추가?

해결법


  1. 1.이것은 IE8에서 작동하지 않았다 (아직 FF에서했던) :

    이것은 IE8에서 작동하지 않았다 (아직 FF에서했던) :

    $("#selectList").append(new Option("option text", "value"));
    

    이 작업을 DID :

    var o = new Option("option text", "value");
    /// jquerify the DOM object 'o' so we can use the html method
    $(o).html("option text");
    $("#selectList").append(o);
    

  2. 2.개인적으로, 나는 옵션을 추가하기위한 구문을 선호합니다 :

    개인적으로, 나는 옵션을 추가하기위한 구문을 선호합니다 :

    $('#mySelect').append($('<option>', {
        value: 1,
        text: 'My option'
    }));
    

    당신이 항목 컬렉션에서 옵션을 추가하는 경우, 다음을 수행 할 수 있습니다 :

    $.each(items, function (i, item) {
        $('#mySelect').append($('<option>', { 
            value: item.value,
            text : item.text 
        }));
    });
    

  3. 3.당신은 또한 자세한 내용은 jQuery를의 방법 핸들 옵션에 방문 할 수 있습니다, 다음 구문을 사용하여 옵션을 추가 할 수 있습니다.

    당신은 또한 자세한 내용은 jQuery를의 방법 핸들 옵션에 방문 할 수 있습니다, 다음 구문을 사용하여 옵션을 추가 할 수 있습니다.


  4. 4.옵션 이름이나 값이 동적 인 경우는 특수 문자를 이스케이프에 대해 걱정할 필요가 싶지 않을 것이다; 이 당신은 간단한 DOM 방법을 선호 할 수 :

    옵션 이름이나 값이 동적 인 경우는 특수 문자를 이스케이프에 대해 걱정할 필요가 싶지 않을 것이다; 이 당신은 간단한 DOM 방법을 선호 할 수 :

    var s= document.getElementById('mySelect');
    s.options[s.options.length]= new Option('My option', '1');
    

  5. 5.당신은 this- 시도 할 수 있습니다

    당신은 this- 시도 할 수 있습니다

    $('#selectID').append($('<option>',
     {
        value: value_variable,
        text : text_variable
    }));
    

    this-처럼

    대 (I = 0; I <10; I ++) { $ ( '#의 mySelect'). APPEND ($ ( '<옵션>', { 값 : I, 텍스트 : "옵션"내가 + })); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">


  6. 6.이것은 매우 간단하다 :

    이것은 매우 간단하다 :

    $('#select_id').append('<option value="five" selected="selected">Five</option>');
    

    또는

    $('#select_id').append($('<option>', {
                        value: 1,
                        text: 'One'
                    }));
    

  7. 7.그것은 잘 작동합니다.

    그것은 잘 작동합니다.

    하나 개 이상의 옵션 요소를 추가하는 경우에, 나는 각 요소에 _가 수행 반대로 한 번 APPEND를 수행 권하고 싶습니다.


  8. 8.$을하고 어떤 이유 ( "#의 myselect") APPEND (새 옵션 ( "텍스트", "텍스트")).; IE7 +에서 나를 위해 작동하지 않습니다

    $을하고 어떤 이유 ( "#의 myselect") APPEND (새 옵션 ( "텍스트", "텍스트")).; IE7 +에서 나를 위해 작동하지 않습니다

    . 나는 $ ( "#의 myselect") HTML ( "<옵션 값 = '텍스트'> 텍스트 ")를 사용했다;


  9. 9.당신이 많은 옵션을 추가하는 경우 도움이 성능에 당신은 더욱 더, 한 번만 DOM을 변경하려고합니다.

    당신이 많은 옵션을 추가하는 경우 도움이 성능에 당신은 더욱 더, 한 번만 DOM을 변경하려고합니다.

    var html = '';
    
    for (var i = 0, len = data.length; i < len; ++i) {
        html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
    }           
    
    $('#select').append(html);
    

  10. 10.

    $('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
    

  11. 11.나는 비 JQuery와 접근 방식을 사용하려면 :

    나는 비 JQuery와 접근 방식을 사용하려면 :

    mySelect.add(new Option('My option', 1));
    

  12. 12.예를 들어 아래 그림과 같이 드롭 다운에 동적으로 옵션을 추가 할 수 있습니다. 여기서이 예에서는 어레이 데이터를 취하여 출력 화면에 도시 한 바와 같이 드롭 배열로 그 값을 바인더 제본 한

    예를 들어 아래 그림과 같이 드롭 다운에 동적으로 옵션을 추가 할 수 있습니다. 여기서이 예에서는 어레이 데이터를 취하여 출력 화면에 도시 한 바와 같이 드롭 배열로 그 값을 바인더 제본 한

    산출:

    VAR resultData = [ "뭄바이", "델리", "첸나이", "고아"] $ (문서) .ready (함수 () { VAR myselect = $ ( '<선택>'); {) .each (resultData, 기능 (인덱스, 키를 $ myselect.append ($ ( '<옵션> ') 발 (키) .html 중에서 (키).); }); . $ ( '#의 selectCity') APPEND (myselect.html ()); }); <스크립트 SRC = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">

    개체 값과 인덱스 모두 옵션에 할당됩니다. 이 솔루션은 심지어 이전 jQuery를 (V1.4)에서 작동합니다!


  13. 24.U 옵션에 추가 할 코드 아래에 시도 할 수 있습니다

    U 옵션에 추가 할 코드 아래에 시도 할 수 있습니다

      <select id="mySelect"></select>
    
        <script>
              $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
        </script>
    

  14. 25.

    $('#select_id').append($('<option>',{ value: v, text: t }));
    

  15. 26.이것은 각각의 select 태그를 추가하는 버튼으로, 나는 그것을 한 방법입니다.

    이것은 각각의 select 태그를 추가하는 버튼으로, 나는 그것을 한 방법입니다.

    $(document).on("click","#button",function() {
       $('#id_table_AddTransactions').append('<option></option>')
    }
    

  16. 27.당신은 ES6에서이 작업을 수행 할 수 있습니다 :

    당신은 ES6에서이 작업을 수행 할 수 있습니다 :

    $.each(json, (i, val) => {
        $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
      });
    

  17. 28.누군가가 여기 오면 데이터 속성 옵션을 추가하는 방법을 찾고

    누군가가 여기 오면 데이터 속성 옵션을 추가하는 방법을 찾고

    ATTR 사용

    var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);
    

    데이터를 사용하여 - 버전 1.2.3을 추가

    var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);
    

  18. 29.시험

    시험

    mySelect.innerHTML+= '<option value=1>My option</option>';
    

    btn.onclick = _ => mySelect.innerHTML + =`<옵션 선택> $ {+ 새 Date} ` <버튼 ID = "BTN"> 옵션 추가

최근에 올라온 글