jQuery를 사용하여 <select>에 옵션을 추가 하시겠습니까?

optionjQuery를 사용하여 드롭 다운 에 추가하는 가장 쉬운 방법은 무엇입니까 ?

이것이 효과가 있습니까?

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

이것은 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);

개인적으로 옵션을 추가하기 위해이 구문을 선호합니다.

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

항목 모음에서 옵션을 추가하는 경우 다음을 수행 할 수 있습니다.

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

다음 구문을 사용하여 옵션을 추가 할 수 있으며 자세한 내용 은 jQuery의 처리 방법 옵션을 방문 하십시오.

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

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

옵션 이름이나 값이 동적이면 특수 문자를 이스케이프 처리하는 것에 대해 걱정할 필요가 없습니다. 이것에서 간단한 DOM 메소드를 선호 할 수 있습니다.

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

옵션 1-

당신은 이것을 시도 할 수 있습니다-

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

이처럼

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

옵션 2-

아니면 이것을 시도하십시오

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

이처럼

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

이것은 매우 간단합니다.

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

또는

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

잘 작동합니다.

옵션 요소를 두 개 이상 추가하는 경우 각 요소에 추가를 수행하는 대신 추가를 한 번 수행하는 것이 좋습니다.

어떤 이유로 든 $("#myselect").append(new Option("text", "text"));IE7 +에서 작동하지 않습니다.

나는 사용해야했다 $("#myselect").html("<option value='text'>text</option>");

많은 옵션을 추가하는 경우 성능을 향상시키기 위해 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);

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

비 jquery 접근 방식을 사용하고 싶습니다.

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

아래 예와 같이 옵션을 드롭 다운에 동적으로 추가 할 수 있습니다. 여기이 예제에서 나는 출력 스크린 샷과 같이 배열 데이터를 가져 와서 그 배열 값을 드롭 다운에 바인딩했습니다.

산출:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

어떤 대답에도 언급되지 않았지만 해당 옵션을 선택하려는 경우 유용합니다.

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

두 가지 방법이 있습니다. 이 두 가지 중 하나를 사용할 수 있습니다.

먼저:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

둘째:

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

선택의 특정 색인에 새 옵션을 삽입하려면 다음을 수행하십시오.

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

이렇게하면 "새 항목"이 선택 항목의 세 번째 항목으로 삽입됩니다.

텍스트를 사용하여 Value 속성을 추가하고 설정할 수 있습니다.

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

옵션을 추가하고 jquery validate를 사용할 때 문제가 발견되었습니다. 여러 목록을 선택하려면 하나의 항목을 클릭해야합니다. 이 코드를 추가하여 처리합니다.

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

이건 어때요

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

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

최고의 성능을위한 빠른 포인트입니다.

많은 옵션을 다룰 때는 항상 큰 문자열을 만들고 'select'에 추가하여 최상의 성능을 얻으십시오.

fg

var $ mySelect = $ ( '# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

더 빠른

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

일부 객체에서 데이터를 얻는 경우 해당 객체를 기능으로 전달하십시오.

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

이름과 ID는 객체 속성의 이름입니다. 따라서 원하는대로 호출 할 수 있습니다 ... 물론 배열이있는 경우 ... for 루프를 사용하여 사용자 정의 함수를 만들고 싶을 때 ... 문서 준비 ... 건배

아이템 컬렉션을 추가 한 dule의 답변 을 바탕으로 원 라이너for...in 는 놀라운 일을합니다.

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

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

u에 select 그룹에 optgroup이 있으면 DOM에서 오류가 발생합니다.

가장 좋은 방법은 다음과 같습니다.

$("#select option:last").after($('<option value="1">my option</option>'));

U는 옵션에 추가하기 위해 아래 코드를 시도 할 수 있습니다

  <select id="mySelect"></select>

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

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

이것이 내가 선택한 방식이며 각 선택 태그를 추가하는 버튼이 있습니다.

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

ES6에서이를 수행 할 수 있습니다.

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

누군가가 여기에 와서 데이터 속성으로 옵션을 추가하는 방법을 찾고 있다면

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