jQuery를 사용하여 드롭다운 목록에 옵션을 추가하려면 어떻게 해야 합니까?

jQuery를 사용하여 드롭다운 목록에 옵션을 추가하려면 어떻게 해야 합니까?

질문에 나와 있듯이 jQuery를 사용하여 드롭다운 목록에 새 옵션을 추가하려면 어떻게 해야 합니까?

감사해요.

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

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이 지원하지 않기 때문입니다.

새 선택 요소를 만든 다음 모든 옵션을 추가할 수 있습니다.루프가 완료되면 실제 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); 

먼저 드롭다운 $('#DropDownQuality'). 빈();

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)

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

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

직접 사용 가능

$"(.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이고 새 값은 삽입할 텍스트입니다.

제 페이지에 있는 드롭다운 수만큼 드롭다운에 옵션을 추가해야 했습니다.그래서 저는 다음과 같이 사용했습니다.

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아니면 내 두 번째에 있는 그런 것들..each()하지만 --- 저는 실제로 그 물체의 구체적인 ID를 얻어야 했고, 그것이 추가되기 전에 그 물체 전체를 제 기능에 전달해야 했습니다.다행히 제 드롭다운의 ID가 "_"로 구분되어 있어서 잡을 수 있었습니다.저는 제가 그럴 필요가 없었다고 생각하지만, 그 외에는 계속해서 저에게 jQuery 예외를 주었습니다.다른 사람들이 내가 무엇인지 알고 싶어할 수도 있는 것.

응답이 "성공 데이터"라고 생각해 보겠습니다.여기에는 드롭다운 메뉴에서 옵션으로 추가해야 하는 목록이 포함되어 있습니다.

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

언급URL : https://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery