195

<select>選択したオプションのインデックスをHTMLアイテムから取得する方法について少し混乱しています。

このページでは、 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()と正しい値が返されるため、さらに混乱します。

4

8 に答える 8

382

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

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

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

アップデート：

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

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
于 2012-11-26T00:05:24.903 に答える
99

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

$("#dropDownMenuKategorie option:selected").index()
于 2014-06-24T17:48:55.233 に答える
20

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

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

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

$(selectElement).prop('selectedIndex', savedIndex);
于 2015-07-03T04:44:29.953 に答える
19

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

var vOptionSelect = "#productcodeSelect1";

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

$(vOptionSelect).find(":selected").index();
于 2014-08-20T04:59:07.183 に答える
7

これを試して

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
于 2012-11-26T06:59:54.803 に答える
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());
  });
});
于 2015-01-23T10:49:37.400 に答える
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>
于 2016-02-15T06:52:52.470 に答える
0 
<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>

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
       var selIndex = $(this).prop('selectedIndex');
       var selVal = $("#dropDownMenuKategorie option:selected").val();
       var selText = $("#dropDownMenuKategorie option:selected").text();
       console.log(selIndex + selVal + selText );
    });
});
于 2021-11-08T12:22:23.843 に答える