Dapatkan indeks opsi yang dipilih dengan jQuery

171

Saya agak bingung tentang cara mendapatkan indeks opsi yang dipilih dari <select>item HTML .

Di halaman ini ada dua metode yang dijelaskan. Namun, keduanya selalu kembali -1. Ini kode jQuery saya:

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

dan dalam 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>
(...)

Kenapa perilaku ini? Apakah ada kemungkinan bahwa selectitu tidak "siap" pada saat menetapkan change()metodenya? Selain itu, mengubah .index()ke .val()adalah mengembalikan nilai yang benar, jadi itulah yang lebih membingungkan saya.

jquery html select indexing Valentino Ru
sumber
1
Pertanyaan yang sangat lama tetapi masalah sebenarnya adalah [name=]digunakan ketika pilih ada iddi atasnya. The [0].selectedIndexdan option:selected-answers bawah keduanya ok.
diynevala

Jawaban:

338

Metode pertama tampaknya berfungsi di browser yang saya uji, tetapi tag opsi tidak benar-benar sesuai dengan elemen aktual di semua browser, sehingga hasilnya dapat bervariasi.

Cukup gunakan selectedIndexproperti elemen DOM:

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

Memperbarui:

Karena versi 1.6 jQuery memiliki propmetode yang dapat digunakan untuk membaca properti:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
Guffa
sumber
7
Mengapa [0]?
Joan.bdm
33
@ Joan.bdm jquery tidak memiliki selectedIndexproperti. Menambahkan [0]mengkonversi objek jquery ke objek javascript yang memiliki selectedIndexproperti. Contoh ini tidak akan berfungsi tanpa[0]
Aram
@JasonL .: selectedIndexadalah properti, dan tidak ada atribut yang sesuai. The attrMetode mungkin bekerja untuk membaca properti di versi sebelumnya dari 1,6, tapi tidak dari versi itu.
Guffa
@ Guffa Ada ide mengapa selectedIndextidak mulai dari 0 dengan opsi pertama?
adamj
1
@adamj: Maka Anda melakukan sesuatu yang salah. The selectedIndexproperti nol berbasis. Saya memeriksa dokumentasi dan bahkan mencobanya sendiri untuk benar-benar yakin 100% tentang ini.
Guffa
95

Cara yang baik untuk menyelesaikan ini dengan cara Jquery

$("#dropDownMenuKategorie option:selected").index()
pengguna167517
sumber
2
Saya suka bahwa jawaban ini tidak memerlukan [0]jawaban pilihan OP dan sebagai python dev, saya benar-benar dapat menghargai keterbacaan jawaban ini.
NuclearPeon
4
OP sudah mencobanya. Kode identik dengan metode pertama dalam pertanyaan.
Guffa
18

Saya punya solusi yang sedikit berbeda berdasarkan jawaban oleh user167517. Dalam fungsi saya, saya menggunakan variabel untuk id dari kotak pilih yang saya targetkan.

var vOptionSelect = "#productcodeSelect1";

Indeks dikembalikan dengan:

$(vOptionSelect).find(":selected").index();
luckychii
sumber
17

Anda bisa menggunakan .prop(propertyName)fungsi untuk mendapatkan properti dari elemen pertama di objek jQuery.

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

Ini menjaga kode Anda dalam ranah jQuery dan juga menghindari opsi lain menggunakan pemilih untuk menemukan opsi yang dipilih. Anda kemudian dapat mengembalikannya menggunakan kelebihan:

$(selectElement).prop('selectedIndex', savedIndex);
Nick Bedford
sumber
6

coba ini

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
rajesh kakawat
sumber
7
Tidak cukup jQuery
sohaiby
1
Ada apa dengan semua peringatan?
Beanwah
3
@Beanwah - Ini adalah cara terbaik untuk menguji apapun! ;)
JoePC
@ JoPC no tidak. console.log () akan lebih baik
@ reiner.luke -;) = facetiousness
JoePC
6

selectedIndex adalah properti Pilih JavaScript. Untuk jQuery Anda dapat menggunakan kode ini:

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
sumber
3

Anda bisa mendapatkan indeks kotak pilih dengan menggunakan: .prop () metode JQuery

Periksa ini :

<!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
sumber