ฉันจะตั้งค่าของ DropDownList โดยใช้ jQuery ได้อย่างไร

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

$("#mydropdownlist").val("thevalue");

เพียงตรวจสอบให้แน่ใจว่าค่าในแท็กตัวเลือกตรงกับค่าในเมธอด val

หากคุณทำงานกับดัชนีคุณสามารถตั้งค่าดัชนีที่เลือกโดยตรงด้วย .attr ():

$("#mydropdownlist").attr('selectedIndex', 0);

สิ่งนี้จะตั้งเป็นค่าแรกใน droplist

แก้ไข: วิธีที่ฉันใช้ในการทำงาน แต่ดูเหมือนว่าจะไม่ได้อีกต่อไป

แต่ฮันชี้ให้เห็นอย่างเป็นสุขในความคิดเห็นวิธีที่ถูกต้องคือ:

$("#mydropdownlist").get(0).selectedIndex = index_here;

ตามที่แนะนำโดย @Nick Berardi หากค่าที่เปลี่ยนแปลงของคุณไม่ปรากฏที่ส่วนหน้าของ UI ให้ลอง:

$("#mydropdownlist").val("thevalue").change();

ลองวิธีง่ายๆนี้:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

หากดรอปดาวน์ของคุณคือ Asp.Net ดรอปดาวน์โค้ดด้านล่างจะทำงานได้ดี

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

แต่ถ้า DropDown ของคุณคือ HTML ให้เลื่อนลงรหัสนี้จะใช้งานได้

 $("#DropDownName")[0].selectedIndex=0;

คำตอบที่ดีที่สุดสำหรับคำถาม:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

เช่น:

$("#CityID").val(20).trigger("chosen:updated");

หรือ

$("#CityID").val("chicago").trigger("chosen:updated");

กำหนดค่าและอัปเดตกิจกรรมรายการแบบเลื่อนลง

$("#id").val("1234").change();

มีหลายวิธีที่จะทำ นี่คือบางส่วนของพวกเขา:

$("._statusDDL").val('2');

หรือ

$('select').prop('selectedIndex', 3);

ฉันคิดว่านี่อาจช่วย:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

หากคุณทำเช่นนี้คุณจะเพิ่มองค์ประกอบที่ไม่มีข้อความ ดังนั้นเมื่อคุณคลิกเดอคอมโบก็ไม่ได้ apear แต่ค่า -1 คุณเพิ่มเลือกในภายหลังด้วย $ (". autoCompleteDepartment"). val (-1); ให้คุณควบคุมว่าคอมโบนั้นมีค่าที่ถูกต้องหรือไม่

หวังว่ามันจะช่วยให้ทุกคน

ขอโทษสำหรับภาษาอังกฤษของฉัน

หากคุณเพียงแค่ต้องกำหนดค่าของแบบเลื่อนลงวิธีที่ดีที่สุดคือ

$("#ID").val("2");

หากคุณต้องเรียกสคริปต์ใด ๆ หลังจากอัปเดตค่าดรอปดาวน์เช่นถ้าคุณตั้งค่าเหตุการณ์ onChange ใด ๆ ในดรอปดาวน์และคุณต้องการเรียกใช้งานนี้หลังจากอัปเดตดร็อปดาวน์กว่าที่คุณต้องการใช้เช่นนี้

$("#ID").val("2").change();

นี่คือฟังก์ชั่นที่สร้างขึ้นเพื่อตั้งค่าตัวเลือกที่เลือกอย่างรวดเร็ว:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

เรียกใช้ฟังก์ชันนี้ด้วยรหัสองค์ประกอบอาร์กิวเมนต์และค่าที่เลือก แบบนี้:

SetSelected('selectID','some option');

มันจะมีประโยชน์เมื่อมีตัวเลือกมากมายให้เลือก

ในกรณีที่คุณโหลดทั้งหมด<options ....></options>ด้วยการโทร Ajax
ทำตามขั้นตอนเหล่านี้เพื่อทำสิ่งนี้

1) สร้างวิธีแยกต่างหากสำหรับการตั้งค่าแบบเลื่อนลง
สำหรับ Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2) เรียกวิธีนี้เมื่อ ajax call ประสบความสำเร็จ html ทั้งหมดจะต้องต่อท้ายงานให้เสร็จ

สำหรับอดีต:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

กำหนดdrop-down selectedค่าและอัพเดทการเปลี่ยนแปลง

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

ที่นี่เราแรกตั้งค่าจากModelและกว่าการปรับปรุงมันในเลือก

// รูปแบบ Html ของรายการแบบเลื่อนลง

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// หากคุณต้องการเปลี่ยนรายการที่เลือกเป็น test2 โดยใช้ javascript ลองอันนี้. // ตั้งค่าตัวเลือกถัดไปที่คุณต้องการเลือก

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

การใช้คำตอบที่ไฮไลต์ / ตรวจสอบด้านบนนั้นเหมาะกับฉัน ... ฉันโกงการรับ URL เล็กน้อย แต่โดยทั่วไปฉันกำหนด URL ใน Javascript แล้วตั้งค่าผ่านคำตอบ jquery จากด้านบน:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

สำหรับผู้ที่ใช้ Bootstrap ให้ใช้$(#elementId').selectpicker('val','elementValue')แทน$('#elementId').val('elementValue')เนื่องจากหลังไม่ได้อัปเดตค่าใน UI

หมายเหตุ : แม้.change()ฟังก์ชั่นใช้งานได้ตามคำแนะนำข้างต้นในบางคำตอบ แต่มันจะเรียกใช้$('#elementId').change(function(){ //do something })ฟังก์ชัน

เพียงโพสต์สิ่งนี้ออกเพื่อให้ผู้อ้างอิงหัวข้อนี้ในอนาคต