web-dev-qa-db-ja.com

html-ドロップダウンでオプションタグのカスタム属性を取得する方法は？

このコードがある場合：

_ <select onchange="alert('?');" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
 </select>
_

カスタム属性isredから値 '-1'を取得するにはどうすればよいですか？ valueプロパティを使用したくありません。そして、私は名前またはIDでオプションタグをターゲットにしたくありません。

onchange="alert(this.getselectedoptionID.getAttribute('isred'));"のようなものが欲しい

誰でも助けることができますか？

また、jqueryを使用したくありません。

javascripthtmlselect
31
omega

SelectedIndexが何であるかを把握し、そのoptions []配列からgetAttributeを把握する必要があります。

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
    <option isred="-5" value="hi">click</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jsFiddle DEMO

サイドノートとして：

HTMLでインラインjavascriptを使用しないでください。 UIからビジネスロジックを分離する必要があります。これを処理するには、代わりにjavascriptイベントハンドラを作成します。 （jQuery/Angular /など）

54
Mark Pieszak - Trilon.io

jqueryでは、次のように書くことができます。

$("#myname").find(':selected').attr('isred');
17
Bernard

次のようなものを使用します。

document.getElementById("x").onchange = function () {
    console.log(this.options[this.selectedIndex].getAttribute("isred"));
};
7
Anthony Mills

以下のようなHTMLマークアップがあると仮定します。

<form id="frm_">
    <select name="Veh">
        <option value='-1' selected='selected'>Select</option>
        <option value='0' ren='x'>xxx</option>
        <option value='1' ren='y'>yyy</option>
    </select>
</form>

attr "ren"は次のようにアクセスできます。

function getRep() {
    var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
                 .elements['Veh'].selectedIndex].getAttribute('ren');
    console.log("Val of ren " + ren); //x or y
}

デモ

3
walter

次を使用します：.getAttribute('isred')

あなたが欲しい：

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
    <option isred="-1" value="hi">click</option>
    <option isred="-1" value="ho">click</option>
</select>
1
GitaarLAB
//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {

//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :) 
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}
 <select id="name_your_id" name="myname" class="myclass">
    <option isred="423423" value="hi">One</option>
    <option isred="-1" value="hi">Two</option>
 </select>
0
Code Cooker