Javascript html - 如何在下拉列表中获取选项标签的自定义属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11957677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html - how to get custom attribute of option tag in dropdown?
提问by omega
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。
回答by Mark Pieszak - Trilon.io
You need to figure out what the selectedIndex is, then getAttributefrom that options[] Array.
你需要弄清楚 selectedIndex 是什么，然后getAttribute从那个 options[] 数组。
<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>?????????????????????????????????????
As a side note:
作为旁注：
Don't use inline javascriptin 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. 您希望将业务逻辑与 UI 分开。创建一个 javascript 事件处理程序来处理这个。（jQuery / Angular / 等）
回答by Bernard
in jquery, you can just write:
在 jquery 中，你可以只写：
$("#myname").find(':selected').attr('isred');
回答by Anthony Mills
Use something like this:
使用这样的东西：
document.getElementById("x").onchange = function () {
console.log(this.options[this.selectedIndex].getAttribute("isred"));
};
回答by walter
Assuming we have a HTMLmarkup 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
}
回答by Code Cooker
//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>回答by GitaarLAB
You use: .getAttribute('isred')
你用： .getAttribute('isred')
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>
回答by Saintush Kumar
you can
你可以
$(".myclass").val(function(){alert($("option",this).attr("isred"));})
