ฉันจะเพิ่มตัวเลือกใน DropDownList โดยใช้ jQuery ได้อย่างไร

ตามที่คำถามบอกฉันจะเพิ่มตัวเลือกใหม่ใน DropDownList โดยใช้ jQuery ได้อย่างไร

ขอบคุณ

โดยไม่ต้องใช้ปลั๊กอินเสริมใด ๆ

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

หากคุณมีตัวเลือกมากมายหรือต้องใช้รหัสนี้บ่อยครั้งมากคุณควรใช้DocumentFragmentแทนการแก้ไข DOM หลายครั้งโดยไม่จำเป็น สำหรับตัวเลือกเพียงไม่กี่ตัวฉันจะบอกว่ามันไม่คุ้มค่า

------------------------------- เพิ่ม ------------------ --------------

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

คุณอาจต้องการล้างข้อมูล 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

Pease note @ 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ของรายการดรอปดาวน์และ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 แบบเลื่อนลงได้ "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>');
}