รับดัชนีของตัวเลือกที่เลือกด้วย jQuery

171

ฉันสับสนเล็กน้อยเกี่ยวกับวิธีรับดัชนีของตัวเลือกที่เลือกจาก<select>รายการHTML

ในหน้านี้มีสองวิธีที่อธิบายไว้ -1อย่างไรก็ตามทั้งสองจะกลับมาเสมอ นี่คือรหัส jQuery ของฉัน:

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
        alert($("#dropDownMenuKategorie option:selected").index());
        alert($("select[name='dropDownMenuKategorie'] option:selected").index());
    });
});

และใน html

(...)
<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
    <option value="shopping">Shopping</option>
    <option value="bildung">Bildung</option>
</select>
(...)

ทำไมพฤติกรรมนี้ มีโอกาสใดบ้างหรือที่ที่select"ยังไม่พร้อม" ในขณะที่กำหนดchange()วิธีการนั้น? นอกจากนี้การเปลี่ยนแปลง.index()ไป.val()จะกลับมาคุ้มค่าที่เหมาะสมเพื่อให้เป็นสิ่งที่สร้างความสับสนให้ฉันมากยิ่งขึ้น

— วาเลนติโนหรุ
แหล่งที่มา

1

เป็นคำถามเก่า แต่ปัญหาที่แท้จริงคือการ[name=]เลือกใช้เมื่อมีidอยู่ คำตอบ[0].selectedIndexและ - คำoption:selectedตอบด้านล่างใช้ได้ทั้งคู่

— diynevala

338

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

เพียงใช้selectedIndexคุณสมบัติขององค์ประกอบ DOM:

alert($("#dropDownMenuKategorie")[0].selectedIndex);

ปรับปรุง:

ตั้งแต่เวอร์ชัน 1.6 jQuery มีpropวิธีการที่สามารถใช้อ่านคุณสมบัติ:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));

— Guffa
แหล่งที่มา

7

ทำไม[0]?

— Joan.bdm

33

@ Joan.bdm jquery ไม่มีselectedIndexคุณสมบัติ การเพิ่ม[0]แปลงวัตถุ jquery เป็นวัตถุ javascript ซึ่งมีselectedIndexคุณสมบัติ ตัวอย่างนี้จะไม่ทำงานโดยไม่ต้อง[0]

— ซีเรีย

@JasonL .: selectedIndexเป็นทรัพย์สินและไม่มีแอตทริบิวต์ที่เกี่ยวข้อง attrวิธีการอาจจะทำงานในการอ่านคุณสมบัติในรุ่นก่อนหน้านี้กว่า 1.6 แต่ไม่ได้มาจากรุ่นที่

— Guffa

@Guffa มีความคิดว่าทำไมselectedIndexไม่เริ่มจาก 0 ด้วยตัวเลือกแรก?

— adamj

1

@adamj: ถ้าอย่างนั้นคุณกำลังทำอะไรผิดไป selectedIndexคุณสมบัติเป็นศูนย์ตาม ฉันตรวจสอบเอกสารแล้วและพยายามทำเองเพื่อให้แน่ใจ 100% เกี่ยวกับเรื่องนี้

— Guffa

95

วิธีที่ดีในการแก้ปัญหานี้ในลักษณะ Jquery

$("#dropDownMenuKategorie option:selected").index()

— user167517
แหล่งที่มา

2

ฉันชอบที่คำตอบนี้ไม่จำเป็นต้องใช้คำตอบที่ต้องการ[0]ของ OP และเป็นงูใหญ่ dev ฉันสามารถชื่นชมความสามารถในการอ่านของคำตอบนี้

— NuclearPeon

4

OP พยายามแล้ว รหัสจะเหมือนกับวิธีแรกในคำถาม

— Guffa

18

ฉันมีทางออกที่แตกต่างกันเล็กน้อยตามคำตอบของ user167517 ในฟังก์ชั่นของฉันฉันใช้ตัวแปรสำหรับรหัสของกล่องที่ฉันเลือก

var vOptionSelect = "#productcodeSelect1";

ดัชนีถูกส่งคืนด้วย:

$(vOptionSelect).find(":selected").index();

— luckychii
แหล่งที่มา

17

คุณสามารถใช้.prop(propertyName)ฟังก์ชันรับคุณสมบัติจากองค์ประกอบแรกในวัตถุ jQuery

var savedIndex = $(selectElement).prop('selectedIndex');

สิ่งนี้จะเก็บโค้ดของคุณไว้ในขอบเขตของ jQuery และหลีกเลี่ยงตัวเลือกอื่น ๆ ของการใช้ตัวเลือกเพื่อค้นหาตัวเลือกที่เลือก คุณสามารถกู้คืนได้โดยใช้โอเวอร์โหลด:

$(selectElement).prop('selectedIndex', savedIndex);

— นิคเบดฟอร์ด
แหล่งที่มา

6

ลองนี้

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);

— rajesh kakawat
แหล่งที่มา

7

jQuery ไม่เพียงพอ

— sohaiby

1

การแจ้งเตือนทั้งหมดคืออะไร

— Beanwah

3

@Beanwah - เป็นวิธีที่ดีที่สุดในการทดสอบอะไร! ;)

— JoePC

@JoePC ไม่มีมัน console.log () จะทำได้ดีกว่า

@ reiner.luke -;) =

— facetiousness

6

selectedIndexเป็นคุณสมบัติเลือก JavaScript สำหรับ jQuery คุณสามารถใช้รหัสนี้:

jQuery(document).ready(function($) {
  $("#dropDownMenuKategorie").change(function() {
    // I personally prefer using console.log(), but if you want you can still go with the alert().
    console.log($(this).children('option:selected').index());
  });
});

— Rishi Kulshreshtha
แหล่งที่มา

3

คุณสามารถรับดัชนีของกล่องที่เลือกโดยใช้: .prop () วิธีการของ JQuery

ตรวจสอบสิ่งนี้:

<!doctype html>
<html>
<head>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});

function check(){
    alert($("#NumberSelector").prop('selectedIndex'));
    alert(document.getElementById("NumberSelector").value);
}
</script>
</head>

<body bgcolor="yellow">
<div>
<select id="NumberSelector" onchange="check()">
    <option value="Its Zero">Zero</option>
    <option value="Its One">One</option>
    <option value="Its Two">Two</option>
    <option value="Its Three">Three</option>
    <option value="Its Four">Four</option>
    <option value="Its Five">Five</option>
    <option value="Its Six">Six</option>
    <option value="Its Seven">Seven</option>
</select>
</div>
</body>
</html>

— Niharika Birari
แหล่งที่มา