html - 如何在下拉列表中获取选项标签的自定义属性?

时间:2012-08-14 17:32:50

标签: javascript html select

如果我有这段代码:

 <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。

7 个答案:

答案 0 :(得分:52)

您需要弄清楚selectedIndex是什么,然后从那些选项[]数组中找出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

作为旁注:

请勿在{{1​​}}中使用内嵌javascript 。您希望将业务逻辑与UI分开。创建一个javascript事件处理程序来处理这个问题。 (jQuery / Angular / etc)

答案 1 :(得分:17)

在jquery中,你可以写:

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

答案 2 :(得分:7)

使用类似的东西:

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

答案 3 :(得分:3)

假设我们有一个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
}

Demo

答案 4 :(得分:1)

您使用:.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>

答案 5 :(得分:0)

//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>

答案 6 :(得分:-1)

你可以

$(".myclass").val(function(){alert($("option",this).attr("isred"));})