Получить индекс выбранной опции с помощью jQuery

Я немного смущен тем, как получить индекс выбранной опции из элемента HTML <select>.

На этой странице описаны два метода. Однако оба всегда возвращаются -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

Первые методы, похоже, работают в браузерах, которые я тестировал, но теги параметров действительно не соответствуют фактическим элементам во всех браузерах, поэтому результат может быть различным.

Просто используйте свойство selectedIndex элемента DOM:

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

Обновление:

Поскольку версия 1.6 jQuery имеет метод prop, который можно использовать для чтения свойств:

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

Ответ 2

Хороший способ решить эту проблему с помощью JQuery

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

Ответ 3

У меня немного другое решение, основанное на ответе user167517. В моей функции я использую переменную для идентификатора окна выбора, на которое я нацеливаюсь.

var vOptionSelect = "#productcodeSelect1";

Индекс возвращается с помощью:

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

Ответ 4

Вы можете использовать функцию .prop(propertyName), чтобы получить свойство из первого элемента в объекте jQuery.

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

Это сохраняет ваш код в области jQuery, а также избегает другого варианта использования селектора, чтобы найти выбранный параметр. Затем вы можете восстановить его с помощью перегрузки:

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

Ответ 5

попробуйте это

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

Ответ 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());
  });
});

Ответ 7

Вы можете получить индекс окна выбора с помощью:.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>