jQueryで選択したオプションのインデックスを取得する

171

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を割り当てるときに「準備ができていない」可能性はありますchange()か？さらに、に変更.index()する.val()と正しい値が返されるので、それが私をさらに混乱させています。

— バレンチノ・ル
ソース

1

そのような古い質問ですが、本当の問題は、[name=]selectがidそれを持っているときに使用されます。以下の[0].selectedIndex-と-のoption:selected答えはどちらも問題ありません。

— diynevala

338

最初の方法は、テストしたブラウザーで機能するようですが、オプションタグは実際にはすべてのブラウザーの実際の要素に対応していないため、結果が異なる場合があります。

selectedIndexDOM要素のプロパティを使用するだけです。

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

更新：

バージョン1.6以降、jQueryにはpropプロパティの読み取りに使用できるメソッドがあります。

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

— グッファ
ソース

7

なぜ[0]？

— Joan.bdm 2014年

33

@ Joan.bdm jqueryにはselectedIndexプロパティがありません。追加すると[0]、jqueryオブジェクトがselectedIndexプロパティを持つjavascriptオブジェクトに変換されます。この例は、なしでは機能しません[0]

— Aram

@JasonL .: selectedIndexはプロパティであり、対応する属性はありません。このattrメソッドは、1.6より前のバージョンのプロパティを読み取るように機能する場合がありますが、そのバージョンからはできません。

— Guffa

@GuffaなぜselectedIndex最初のオプションで0から始まらないのかに関するアイデアはありますか？

— adamj 2016年

1

@adamj：それからあなたは何か間違ったことをしています。selectedIndexプロパティはゼロベースです。私はドキュメンテーションをチェックし、これについて本当に100％確実であるように自分で試してみました。

— Guffa

95

これをjqueryの方法で解決する良い方法

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

— user167517
ソース

2

この回答には[0]OPの優先回答が必要ないことを気に入っています。Pythonの開発者として、この回答の読みやすさを高く評価できます。

— NuclearPeon 2014

4

OPはすでにそれを試しました。コードは、質問の最初の方法と同じです。

— Guffa

18

user167517の回答に基づいて、少し異なる解決策があります。私の関数では、ターゲットにしている選択ボックスのIDに変数を使用しています。

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

— ラジェシュ・カカワット
ソース

7

jQueryが不十分

— sohaiby

1

すべてのアラートとは何ですか？

— Beanwah 2015

3

@Beanwah-何かをテストするための最良の方法です！;）

— JoePC、2018

@JoePCいいえ。console.log（）の方が優れています

@ reiner.luke-;）=

— facetiousness

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

— リシ・クルシュレサ
ソース

3

選択ボックスのインデックスを取得するには、JQueryの.prop（）メソッドを使用します。

これをチェックして：

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

— ニハリカ・ビラリ
ソース