JQuery ile seçilen seçeneğin dizinini al

171

Bir HTML <select>öğesinden seçilen bir seçeneğin bir dizinini nasıl alacağım konusunda biraz kafam karıştı .

On Bu sayfada anlatılan iki yöntem vardır. Ancak, her ikisi de her zaman geri dönüyor -1. İşte benim jQuery kodu:

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

ve html biçiminde

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

Neden bu davranış? Yöntemini selectatarken şu an "hazır" olma şansı var mı change()? Ayrıca, değişen .index()etmek .val()beni daha kafasını karıştıran şey böylece en doğru değerini döndürüyor.

— Valentino Ru
kaynak

1

Böyle eski bir soru ama asıl sorun, [name=]seçimin idüzerinde olduğu zaman kullanılır . Aşağıdaki [0].selectedIndexve option:selected-answers her ikisi de Tamam.

— diynevala

338

İlk yöntemler test ettiğim tarayıcılarda çalışıyor gibi görünüyor, ancak seçenek etiketleri gerçekten tüm tarayıcılardaki gerçek öğelere karşılık gelmiyor, bu nedenle sonuç değişebilir.

selectedIndexDOM öğesinin özelliğini kullanmanız yeterlidir:

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

Güncelleme:

1.6 sürümü jQuery propözellikleri okumak için kullanılabilecek bir yöntem olduğundan:

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

— Guffa
kaynak

7

Neden [0]?

— Joan.bdm

33

@ Joan.bdm jquery'de selectedIndexmülk yok. Ekleme [0], jquery nesnesini özelliği olan bir javascript nesnesine dönüştürür selectedIndex. Bu örnek olmadan çalışmaz[0]

— Aram

@JasonL .: selectedIndexbir özelliktir ve karşılık gelen bir özelliği yoktur. attrYöntem ama o sürümden önceki 1.6 den sürümlerinde özelliği okumaya çalışabilir.

— Guffa

@Guffa Neden selectedIndexilk seçenekle 0'dan başlamıyor?

— adamj

1

@adamj: O zaman yanlış bir şey yapıyorsun. selectedIndexMülkiyet sıfır dayanır. Belgeleri kontrol ettim ve bu konuda gerçekten% 100 emin olmak için kendimi bile denedim.

— Guffa

95

Bunu Jquery tarzında çözmenin iyi yolu

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

— user167517
kaynak

2

Bu cevabın [0]OP'nin tercih ettiği cevabı gerektirmediğini ve bir python geliştiricisi olarak bu cevabın okunabilirliğini gerçekten takdir edebilirim.

— NuclearPeon

4

OP bunu zaten denedi. Kod, sorudaki ilk yöntemle aynıdır.

— Guffa

18

User167517 tarafından verilen cevaba göre biraz farklı bir çözüm var. Benim fonksiyonumda hedeflediğim seçme kutusunun kimliği için bir değişken kullanıyorum.

var vOptionSelect = "#productcodeSelect1";

Dizin şu şekilde döndürülür:

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

— luckychii
kaynak

17

.prop(propertyName)JQuery nesnesindeki ilk öğeden bir özellik almak için işlevi kullanabilirsiniz .

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

Bu, kodunuzu jQuery alanı içinde tutar ve seçilen seçeneği bulmak için bir seçici kullanma seçeneğinden de kaçınır. Daha sonra aşırı yükü kullanarak geri yükleyebilirsiniz:

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

— Nick Bedford
kaynak

6

bunu dene

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

— rajesh kakawat
kaynak

7

Yeterli jQuery

— sohaiby

1

Tüm uyarılar neler?

— Beanwah

3

@Beanwah - Bir şeyi test etmenin en iyi yolu! ;)

— JoePC

@JoePC hayır onun değil. console.log () daha iyi olacak

@ reiner.luke -;) = facetiousness

— JoePC

6

selectedIndex bir JavaScript Seçim Özelliğidir. JQuery için bu kodu kullanabilirsiniz:

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
kaynak

3

Seçim kutusunun dizinini JQuery: .prop () yöntemini kullanarak alabilirsiniz

Şuna göz at :

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