web-dev-qa-db-ja.com

選択したオプションのインデックスを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>
(...)

なぜこのような行動ですか？ change()メソッドを代入する時点でselectが "準備ができていない"という可能性はありますか？さらに、.index()を.val()に変更すると正しい値が返されるので、それが私をさらに混乱させます。

jqueryhtmlselectindexing
153
Valentino Ru

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

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

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

更新：

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

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

Jqueryの方法でこれを解決するための良い方法

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

私はuser167517による答えに基づいてわずかに異なる解決策を持っています。私の機能では、ターゲットにしている選択ボックスのIDに変数を使用しています。

var vOptionSelect = "#productcodeSelect1";

インデックスは次のように返されます。

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

JQueryオブジェクトの最初の要素からプロパティを取得するには、 .prop(propertyName) 関数を使用できます。

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

これにより、コードをjQueryレルム内に保ち、選択したオプションを見つけるためにセレクタを使用するという他のオプションも回避できます。その後、オーバーロードを使用してそれを復元することができます。

$(selectElement).prop('selectedIndex', savedIndex);
16
Nick Bedford

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

これを試して

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
6
rajesh kakawat

選択ボックスのインデックスは、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>
2
Niharika Birari