[解決済み] jQueryで選択されたオプションのインデックスを取得する

質問

選択されたオプションのインデックスをHTMLから取得する方法について、少し混乱しています。 <select> の項目があります。

オン これ のページには、2つのメソッドが記述されています。しかし、どちらも常に -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 を割り当てた時点では、quot;ready" ではありません。 change() メソッドを使用しますか？さらに .index() から .val() は正しい値を返すので、それがさらに私を混乱させるのです。

どのように解決するのですか？

最初の方法は、私がテストしたブラウザでは動作するようですが、オプションタグはすべてのブラウザで実際の要素に対応しているわけではないので、結果は異なるかもしれません。

ただ selectedIndex プロパティで指定します。

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

アップデートする

バージョン1.6以降、jQueryには prop メソッドを使用してプロパティを読み込むことができます。

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