如何在下拉菜单中获取选项标签的自定义属性?

If I have this code:

如果我有这段代码:

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

How can I get the value '-1' from the custom attribute isred ? I don't want to use the value property. And I dont want to target the option tag by a name or id.

如何从自定义属性isred获取值'-1' ?我不想用value属性。我不希望通过名称或id来定位选项标签。

I want something like onchange="alert(this.getselectedoptionID.getAttribute('isred'));"

我想要onchange="alert " (this。getselectedoptionid.getattribute ('isred'));

Can anyone help?

谁能帮忙吗?

Also I don't want to use jquery.

我也不想使用jquery。

6 个解决方案

#1

You need to figure out what the selectedIndex is, then getAttribute from that options[] Array.

您需要找出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

jsFiddle演示

As a side note:

Don't use inline javascript in your HTML. You want to separate your business logic from your UI. Create a javascript event handlers instead to handle this. (jQuery / Angular / etc)

不要在HTML中使用内联javascript。您希望将业务逻辑与UI分离。创建一个javascript事件处理程序来处理这个问题。(jQuery / angle /等)

#2

in jquery, you can just write:

在jquery中，你可以这样写:

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

#3

Use something like this:

使用这样的:

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

#4

Assuming we have a HTML markup as below:

假设我们有如下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>

The attr "ren" can be accessed like this:

可以这样访问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

演示

#5

You use: .getAttribute('isred')

你使用:.getAttribute(isr)

You want:

你想要的:

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

#6

you can

你可以

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