Получить индекс выбранной опции с помощью 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=]используется select id. И- [0].selectedIndexи option:selectedответы ниже оба в порядке.

— диневала

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 Есть идеи, почему selectedIndexне начинается с 0 с первым вариантом?

— adamj

1

@adamj: Тогда вы делаете что-то не так. selectedIndexСвойство нуля на основе. Я проверил документацию и даже попробовал сам, чтобы быть на 100% уверенным в этом.

— Guffa

95

Хороший способ решить это в Jquery манере

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

— user167517
источник

2

Мне нравится, что этот ответ не требует [0]предпочтительного ответа OP, и как разработчик Python, я действительно могу оценить читабельность этого ответа.

— NuclearPeon

4

ОП уже попробовал это. Код идентичен первому методу в вопросе.

— Guffa

18

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

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);

— Раджеш Какават
источник

7

Не хватает jQuery

— sohaiby

1

Что со всеми предупреждениями?

— Beanwah

3

@Beanwah - это лучший способ что-нибудь проверить! ;)

— JoePC

@JoePC нет, это не так. console.log () будет работать лучше

@ reiner.luke -;) =

— шутливость

6

selectedIndex - это свойство JavaScript Select. Для 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());
  });
});

— Риши Кулшрештха
источник

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>

— Нихарика Бирари
источник