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

질문에 따르면 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을 한 번만 수정합니다!

플러그인이 없으면 많은 jQuery를 사용하지 않고도 약간 더 오래된 학교로 갈 수 있습니다.

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

옵션 a)가 기본적으로 선택된 값인지 여부와 b)를 지금 선택해야하는지 여부를 지정하려면 두 개의 매개 변수를 더 전달할 수 있습니다.

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

플러그인 : jQuery 선택 상자 . 당신은 이것을 할 수 있습니다 :

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

DropDown을 먼저 지우고 싶을 수도 있습니다. $ ( '# DropDownQuality'). empty ();

MVC의 컨트롤러가 항목이 하나만있는 선택 목록을 반환하도록했습니다.

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

jQuery를 사용한 일반적인 드롭 다운 작업 (Get, Set, Add, Remove)

Peas note @Phrogz의 솔루션은 IE 8에서 작동하지 않지만 @nickf는 모든 주요 브라우저에서 작동합니다. 다른 접근법은 다음과 같습니다.

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

U는 직접 사용할 수 있습니다

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> 여기서 직접 문자열을 사용할 수 있습니다

또한 .prepend ()를 사용하여 옵션을 옵션 목록의 시작 부분에 추가하십시오. http://api.jquery.com/prepend/

jquery를 사용하면 사용할 수 있습니다

      this.$('select#myid').append('<option>newvalue</option>');

여기서 " myid "는 드롭 다운 목록 의 ID 이고 newvalue 는 삽입하려는 텍스트입니다.

내 페이지에 드롭 다운이있는 것처럼 드롭 다운에 옵션을 많이 추가해야했습니다. 그래서 나는 이것을 이런 식으로 사용했습니다 :

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

이렇게하면 1에서 n과 같은 값으로 드롭 다운이 동적으로 설정되고 드롭 다운이있는 순서의 값을 자동으로 선택합니다 (예 : 상자에서 두 번째 드롭 다운에 "2"가 있음).

내가 사용할 수 없다는 말도했다 this거나 this.Object또는 $.obj제 2의 그런 또는 아무것도 .each()실제로 해당 개체의 특정 ID를 가져온 다음 잡아하고 추가 할 것입니다 전에 내 기능에 그 전체 개체를 전달했다 --- 불구하고. 다행히도 내 드롭 다운의 ID는 "_"로 분리되어 있습니다. 필자가해야한다고 생각하지는 않지만 그렇지 않으면 jQuery 예외가 계속 발생합니다. 내가 알고있는 것에 대해 어려움을 겪고있는 다른 사람들은 알고있는 것을 좋아할 것입니다.

응답이 "successData"라고 생각할 수 있습니다. 드롭 다운 메뉴에서 옵션으로 추가해야하는 목록이 포함되어 있습니다.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

이것은 당신을 위해 일할 것입니다 ....

이 기능을 사용해보십시오 :

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}