web-dev-qa-db-ja.com

select-> optionタグのインデックスを取得する方法

_<select id="sel">
<option value="123" selected="selected">text1</option>
<option value="44">text2</option>
<option value="882">text3</option>
...
</select>
_

JQueryで選択したオプションのインデックスを取得するにはどうすればよいですか? .index(subject)の可能性がありますが、テストされたすべての可能性が機能しませんでした...

P.S.インデックス:value = "123" => 0、value = "44" => 1、.。

ありがとう

18
Vov4ik

これはそれを行います:

   $("#sel").attr("selectedIndex")
3
user14038

ボブの2番目の答えだけが正しいです:

_$("#sel")[0].selectedIndex
_

動作: http://jsfiddle.net/b9chris/wxeVN/1/

.attr()の使用は、ページが読み込まれてからユーザー(またはブラウザーのDOM復元)が選択したオプションを変更していない場合にのみ機能します。 http://jsfiddle.net/b9chris/wxeVN/

これをjQuery拡張機能として実装し、その過程でもう少し情報を得ることができます。

_(function($) {
    $.fn.selectedOption = function() {
        var sel = this[0];
        return sel.options[sel.selectedIndex];
    };
})(jQuery)

$('button').click(function() {
    $('#output').text('selected index: ' + $('select').selectedOption().index);
});
_

http://jsfiddle.net/b9chris/wxeVN/102/

.selectedOption()によって返されるのは実際のオプションタグであるため、_.index_、_.value_、および_.text_にアクセスできます。これは通常の使用法のインデックスよりも少し便利です。 。

17
Chris Moschini

私がこれを書いているとき、5年近く前に指摘されたにもかかわらず、上位の2つの回答(受け入れられた回答を含む)は正しくありません。 attr("selectedIndex")は何もしません。これは、selectedIndexが実際のDOM要素のプロパティであり、HTML属性ではないためです。 propを使用する必要があります:

$(this).prop('selectedIndex')

これを間違ったバージョンと比較するインタラクティブなデモ: http://jsfiddle.net/uvwkD/

10
Justin Morgan
$("#sel").attr("selectedIndex")

または

$("#sel")[0] //to get the DOM element
$("#sel")[0].selectedIndex
5
Bob

この場合、選択した要素の前にある兄弟要素の数を確認することで、要素のインデックスを取得できます。

$('#sel option:selected').prevAll().length;
2
antti_s

あなたは実際にjQueryなしでそれを行うことができます:var sel = document.getElementById( 'sel' ); var index = sel.selectedIndex;

2
Jacob Relkin

このコード例のように、jqueryの標準インデックス関数を使用します

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

1
user167517

タイトルが質問と完全に一致していません...

Select-> optionタグのインデックスを取得する方法

option.index // javascript

$(option).prop('index') // jquery

選択済み選択->オプションタグのインデックス:

document.getElementById('sel').selectedIndex // javascript
0
user1566694