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.

— 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

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