เปลี่ยนค่าที่เลือกของรายการแบบหล่นลงด้วย jQuery

ฉันมีรายการแบบหล่นลงพร้อมค่าที่ทราบ สิ่งที่ฉันพยายามทำคือการกำหนดรายการแบบหล่นลงให้เป็นค่าโดยเฉพาะอย่างยิ่งที่ฉันรู้อยู่แล้วโดยใช้jQuery ใช้JavaScriptปกติฉันจะทำสิ่งที่ชอบ:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

อย่างไรก็ตามฉันต้องทำกับjQueryเพราะฉันใช้คลาสCSSสำหรับตัวเลือกของฉัน ( รหัสASP.NETไคลเอ็นต์โง่... )

นี่คือบางสิ่งที่ฉันได้ลอง:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

ฉันจะทำกับjQuery ได้อย่างไร

ปรับปรุง

เมื่อปรากฎออกมาฉันพูดถูกครั้งแรกด้วย:

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

เมื่อฉันวางการแจ้งเตือนไว้ด้านบนมันทำงานได้ดี แต่เมื่อฉันลบการแจ้งเตือนและปล่อยให้มันทำงานด้วยความเร็วเต็มฉันได้รับข้อผิดพลาด

ไม่สามารถตั้งค่าคุณสมบัติที่เลือก ดัชนีไม่ถูกต้อง

ฉันไม่แน่ใจว่าเป็นข้อผิดพลาดกับ jQuery หรือInternet Explorer 6 (ฉันเดา Internet Explorer 6 ) แต่มันน่ารำคาญมาก

เอกสารประกอบของ jQuery :

[jQuery.val] ตรวจสอบหรือเลือกปุ่มตัวเลือกทั้งหมดช่องทำเครื่องหมายและตัวเลือกการเลือกที่ตรงกับชุดของค่า

พฤติกรรมนี้อยู่ในjQueryรุ่น1.2ขึ้นไป

คุณน่าจะต้องการสิ่งนี้มากที่สุด:

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

ด้วยฟิลด์ที่ซ่อนอยู่คุณต้องใช้ดังนี้:

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

หรือ

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

เพียงแค่ FYI คุณไม่จำเป็นต้องใช้คลาส CSS เพื่อทำสิ่งนี้ให้สำเร็จ

คุณสามารถเขียนบรรทัดของรหัสต่อไปนี้เพื่อรับชื่อตัวควบคุมที่ถูกต้องบนไคลเอนต์:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET จะแสดง ID ควบคุมอย่างถูกต้องภายใน jQuery

แค่ลองด้วย

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

และไม่ได้อยู่กับ

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

วิธีแก้ปัญหาเหล่านี้ดูเหมือนจะสมมติว่าแต่ละรายการในรายการแบบหล่นลงของคุณมีค่าval () ที่เกี่ยวข้องกับตำแหน่งในรายการแบบหล่นลง

สิ่งต่าง ๆ มีความซับซ้อนกว่านี้เล็กน้อยหากไม่เป็นเช่นนั้น

หากต้องการอ่านดัชนีที่เลือกของรายการดรอปดาวน์คุณจะต้องใช้สิ่งนี้:

$("#dropDownList").prop("selectedIndex");

ในการตั้งค่าดัชนีที่เลือกของรายการดรอปดาวน์คุณจะต้องใช้สิ่งนี้:

$("#dropDownList").prop("selectedIndex", 1);

โปรดทราบว่าคุณสมบัติprop ()ต้องใช้ JQuery v1.6 ขึ้นไป

เรามาดูกันว่าคุณจะใช้ฟังก์ชันทั้งสองนี้อย่างไร

สมมติว่าคุณมีรายชื่อเดือนแบบเลื่อนลง

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

คุณสามารถเพิ่มปุ่ม "เดือนก่อนหน้า" และ "เดือนถัดไป" ซึ่งจะดูรายการที่เลือกในปัจจุบันและเปลี่ยนเป็นรายการก่อนหน้า / เดือนถัดไป:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

และนี่คือ JavaScript ที่ปุ่มเหล่านี้จะทำงาน:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

ไซต์ต่อไปนี้ยังมีประโยชน์สำหรับการแสดงวิธีการเติมรายการแบบหล่นลงด้วยข้อมูล JSON:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

ว้า !!

หวังว่านี่จะช่วยได้

หลังจากดูวิธีแก้ปัญหาบางอย่างแล้วสิ่งนี้ก็ใช้ได้กับฉัน

ฉันมีรายการแบบหล่นลงหนึ่งรายการที่มีค่าบางอย่างและฉันต้องการเลือกค่าเดียวกันจากรายการแบบหล่นลงอื่น ... ดังนั้นก่อนอื่นฉันใส่ตัวแปรselectIndexของแบบเลื่อนลงครั้งแรกของฉัน

var indiceDatos = $('#myidddl')[0].selectedIndex;

จากนั้นฉันเลือกดัชนีนั้นในรายการดรอปดาวน์ที่สองของฉัน

$('#myidddl2')[0].selectedIndex = indiceDatos;

บันทึก:

ฉันเดาว่านี่เป็นทางออกที่สั้นที่สุดเชื่อถือได้ทั่วไปและหรูหรา

เพราะในกรณีของฉันฉันกำลังใช้แอตทริบิวต์ข้อมูลของตัวเลือกที่เลือกแทนแอตทริบิวต์ค่า ดังนั้นหากคุณไม่มีค่าที่ไม่ซ้ำกันสำหรับแต่ละตัวเลือกวิธีการข้างต้นนั้นสั้นและหวาน !!

ฉันรู้ว่านี่เป็นคำถามเก่าและวิธีการแก้ปัญหาข้างต้นทำงานได้ดียกเว้นในบางกรณี

ชอบ

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

ดังนั้นรายการ 4 จะแสดงเป็น "เลือก" ในเบราว์เซอร์และตอนนี้คุณต้องการเปลี่ยนค่าเป็น 3 และแสดง "รายการ 3" ตามที่เลือกแทนรายการที่ 4 ดังนั้นตามวิธีแก้ไขปัญหาข้างต้นหากคุณใช้

jQuery("#select_selector").val(3);

คุณจะเห็นว่ารายการ 3 ตามที่เลือกในเบราว์เซอร์ แต่เมื่อคุณประมวลผลข้อมูลใน php หรือ asp คุณจะพบค่าที่เลือกเป็น "4" เหตุผลก็คือ html ของคุณจะมีลักษณะเช่นนี้

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

และได้รับค่าสุดท้ายเป็น "4" ในภาษาด้านที่ตัดกัน

ดังนั้นทางออกสุดท้ายของฉันเกี่ยวกับเรื่องนี้

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

แก้ไข : เพิ่มเครื่องหมายคำพูดเดี่ยวรอบ "+ newselectedIndex +" เพื่อให้สามารถใช้ฟังก์ชันการทำงานเดียวกันสำหรับค่าที่ไม่ใช่ตัวเลขได้

ดังนั้นสิ่งที่ฉันทำคือเอาแอตทริบิวต์ที่เลือกออกแล้วสร้างใหม่ตามที่เลือก

ฉันจะซาบซึ้งความคิดเห็นนี้จากโปรแกรมเมอร์อาวุโสเช่น @strager, @ y0mbo, @ISIK และคนอื่น ๆ

หากเรามีรายการแบบหล่นลงพร้อมกับชื่อ "การจำแนกข้อมูล":

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

เราสามารถทำให้มันเป็นตัวแปร:

var dataClsField = $('select[title="Data Classification"]');

จากนั้นใส่ตัวแปรอื่นที่เราต้องการให้ดรอปดาวน์มี:

var myValue = "Top Secret";  // this would have been "2" in your example

จากนั้นเราสามารถใช้ฟิลด์ที่เราใส่dataClsFieldทำการค้นหาmyValueและทำการเลือกโดยใช้.prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

หรือคุณสามารถใช้.val()แต่ตัวเลือกตัวเลือกของ.คุณสามารถใช้ได้ก็ต่อเมื่อมันตรงกับคลาสในรายการดรอปดาวน์และคุณควรใช้เครื่องหมายคำพูดกับค่าที่อยู่ในวงเล็บหรือใช้ตัวแปรที่เราตั้งไว้ก่อนหน้านี้:

dataClsField.val(myValue);

ดังนั้นฉันจึงเปลี่ยนมันเพื่อให้ตอนนี้มันทำงานหลังจาก 300 มิลลิวินาทีโดยใช้ setTimeout ดูเหมือนว่าจะทำงานตอนนี้

ฉันพบปัญหานี้หลายครั้งเมื่อโหลดข้อมูลจากการโทร Ajax ฉันใช้. NET ด้วยและต้องใช้เวลาในการปรับให้เป็นรหัสลูกค้าเมื่อใช้ตัวเลือก jQuery ในการแก้ไขปัญหาที่คุณมีและเพื่อหลีกเลี่ยงการเพิ่มsetTimeoutคุณสมบัติคุณสามารถใส่ " async: false" ในการเรียก Ajax และมันจะให้เวลา DOM พอที่จะให้วัตถุกลับมาที่คุณเพิ่มในการเลือก ตัวอย่างเล็ก ๆ ด้านล่าง:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

เพิ่งทราบ - ฉันใช้ตัวเลือกตัวแทนใน jQuery เพื่อคว้ารายการที่ obfuscated โดย ASP.NET CLient IDs - สิ่งนี้อาจช่วยคุณได้เช่นกัน:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

หมายเหตุ id * wildcard- สิ่งนี้จะค้นหาองค์ประกอบของคุณแม้ว่าชื่อจะเป็น "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

ฉันใช้ฟังก์ชั่นขยายเพื่อรับรหัสลูกค้าเช่น:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

จากนั้นคุณสามารถเรียกใช้ตัวควบคุม ASP.NET ใน jQuery เช่นนี้

$.clientID("_statusDDL")

อีกตัวเลือกหนึ่งคือการตั้งค่าพารามิเตอร์การควบคุม ClientID = "คงที่" ใน. net จากนั้นคุณสามารถเข้าถึงวัตถุใน JQuery ด้วย ID ที่คุณตั้งไว้

<asp:DropDownList id="MyDropDown" runat="server" />

$("select[name$='MyDropDown']").val()ใช้

คุณกำลังโหลดค่าลงในรายการแบบหล่นลงหรือกำหนดค่าที่จะเลือกอย่างไร หากคุณกำลังทำสิ่งนี้โดยใช้ Ajax แล้วเหตุผลที่คุณต้องการการหน่วงเวลาก่อนที่การเลือกจะเกิดขึ้นอาจเป็นเพราะค่าไม่ถูกโหลดในเวลาที่บรรทัดที่มีปัญหาดำเนินการ สิ่งนี้จะอธิบายว่าทำไมมันทำงานเมื่อคุณใส่คำสั่งแจ้งเตือนในบรรทัดก่อนที่จะตั้งค่าสถานะเนื่องจากการกระทำการแจ้งเตือนจะให้ความล่าช้าเพียงพอสำหรับข้อมูลที่จะโหลด

หากคุณใช้วิธี Ajax ของ jQuery คุณสามารถระบุฟังก์ชั่นการโทรกลับแล้วใส่$("._statusDDL").val(2);ลงในฟังก์ชั่นการโทรกลับ

นี่จะเป็นวิธีการจัดการปัญหาที่เชื่อถือได้มากขึ้นเนื่องจากคุณสามารถมั่นใจได้ว่าวิธีการดำเนินการเมื่อข้อมูลพร้อมแม้ว่าจะใช้เวลานานกว่า 300 ms

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "คงที่"

$('#DropUserType').val('1');

ในกรณีของฉันฉันสามารถทำให้มันทำงานโดยใช้วิธี. atr ()

$("._statusDDL").attr("selected", "");