javascript - イベント ハンドラ「この」オブジェクトから属性を取得できません

Question

<select onchange="alert($(this).attr('data-type'))">
    <option data-type="1" value="a">a</option>
    <option data-type="2" value="b">b</option>
</select>

それをjsfiddleで実行すると、nullになります。何か案は？

jsフィドルは次のとおりです。

http://jsfiddle.net/49wyG/

ありがとう！

Answer 1

要素の選択されたインデックスを取得してそこから移動する必要があります。これを試してください：

<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'));">
    <option data-type="1" value="a">a</option>
    <option data-type="2" value="b">b</option>
</select>

私の側ではうまくいきます。

Answer 2

data-type属性は、select 要素ではなく、option 要素にあります。現在選択されているデータ型が必要だと思います

<select onchange="alert($(this).find(':selected').attr('data-type'))">
    <option data-type="1" value="a">a</option>
    <option data-type="2" value="b">b</option>
</select>

http://jsfiddle.net/49wyG/4/

Answer 3

あなたはこれをする必要があります...

<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'))">
    <option data-type="1" value="a">a</option>
    <option data-type="2" value="b">b</option>
</select>

変更イベントの「this」オブジェクトはリストであり、オプションではありません

Answer 4

はではなくthisを指します。代わりにこれを試してください：selectoption

<select>
    <option data-type="1" value="a" onclick="alert($(this).attr('data-type'))">a</option>
    <option data-type="2" value="b" onclick="alert($(this).attr('data-type'))">b</option>
</select>

:selectedまたは、セレクターを使用するかthis.selectedIndex、 を取得することもできますoption。このようなもの：

<select onchange="alert($(':selected',this).attr('data-type'))" >