Отримайте індекс вибраної опції за допомогою 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=]використання, коли вибір має idна ньому. [0].selectedIndexІ option:selected-answers нижче обидва в порядку.

— діневала

338

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

Просто використовуйте selectedIndexвластивість елемента DOM:

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

Оновлення:

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

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

— Гуффа
джерело

7

Чому [0]?

— Joan.bdm

33

@ Joan.bdm jquery не має selectedIndexвластивості. Додавання [0]перетворює об'єкт jquery в об'єкт javascript, який має selectedIndexвластивість. Цей приклад не спрацює без[0]

— Арам

@JasonL .: selectedIndexє властивістю, і немає відповідного атрибута. attrМетод може працювати , щоб прочитати властивість в версіях раніше ніж 1.6, але не від цієї версії.

— Guffa

@Guffa Будь-яка ідея, чому selectedIndexне починається з 0 з першого варіанту?

— adamj

1

@adamj: Тоді ти робиш щось не так. selectedIndexВластивість нуля на основі. Я перевірив документацію і навіть сам спробував її бути справді на 100% впевнений.

— Гуффа

95

Хороший спосіб вирішити це способом Jquery

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

— user167517
джерело

2

Мені подобається, що ця відповідь не вимагає [0]кращої відповіді ОП, і як пітон-розробник, я справді можу оцінити читаність цієї відповіді.

— NuclearPeon

4

ОП вже пробувала це. Код ідентичний першому методу у питанні.

— Гуффа

18

У мене є дещо інше рішення, засноване на відповіді user167517. У своїй функції я використовую змінну для ідентифікатора вікна вибору, на яке я націлений.

var vOptionSelect = "#productcodeSelect1";

Індекс повертається з:

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

— удачі
джерело

17

Ви можете використовувати .prop(propertyName)функцію, щоб отримати властивість з першого елемента в об'єкті jQuery.

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

Це зберігає ваш код у царині jQuery, а також уникає іншого варіанту використання селектора для пошуку вибраного параметра. Потім можна відновити його за допомогою перевантаження:

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

— Нік Бедфорд
джерело

6

спробуйте це

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

— rajesh kakawat
джерело

7

Не вистачає jQuery

— sohaiby

1

Що з усіма сповіщеннями?

— Beanwah

3

@Beanwah - це найкращий спосіб протестувати що-небудь! ;)

— JoePC

@JoePC ні його немає. console.log () зробить краще

@ reiner.luke -;) =

— вибагливість

6

selectedIndex - це властивість Select 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());
  });
});

— Ріші Кульшрешта
джерело

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>

— Ніхаріка Бірарі
джерело