[jquery] jQuery를 사용하여 DropDownList에 옵션을 어떻게 추가합니까?

추가 플러그인을 사용하지 않고

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

많은 옵션이 있거나이 코드를 매우 자주 실행해야하는 경우 DOM을 불필요하게 여러 번 수정하는 대신 DocumentFragment 를 사용해야합니다 . 소수의 옵션에 대해서만 가치가 없다고 말하고 싶습니다.

——————————- 추가 —————— ————–

DocumentFragment속도 향상에는 좋은 옵션이지만 document.createElement('option')IE6 및 IE7에서 지원하지 않기 때문에 옵션 요소를 사용할 수 없습니다 .

우리가 할 수있는 일은 새로운 select 요소를 만들고 모든 옵션을 추가하는 것입니다. 루프가 완료되면 실제 DOM 객체에 추가하십시오.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

이런 식으로 DOM을 한 번만 수정합니다!

답변

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

$('<option value="6">Java Script</option>').appendTo("#ddlList");

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