javascript PURE JS获取选中选项数据属性值返回Null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28085201/
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
PURE JS get selected option data attribute value returns Null
提问by Europeuser
I have this html:
我有这个 html：
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>
and js
和js
function check_status(obj){
var uid = obj.getAttribute('data');
alert(uid);
}
but it always alerts null instead of data value Where is the problem guys? Thanks
但它总是提醒空值而不是数据值问题在哪里？谢谢
回答by Jakub Mizio?ek
The problem is that you get select element and not selected option element as function argument. And it does not have the dataattribute. You have to get the option attribute like so:
问题是您将选择元素而不是选择的选项元素作为函数参数。而且它没有这个data属性。您必须像这样获取 option 属性：
function check_status(obj) {
var uid = obj.options[obj.selectedIndex].getAttribute('data');
alert(uid);
}<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>回答by glyuck
You are trying to get select data attribute, and not option's.
您正在尝试获取选择数据属性，而不是选项。
Also, I can see that all you dataattributes are identical. Then you can move it from option to select itself: <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" >and use code snipped from your question unmodified.
另外，我可以看到您的所有data属性都是相同的。然后你可以将它从选项中移动到选择自身：<select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" >并使用从你的问题中剪下的未修改的代码。
function check_status(obj) {
var uid = obj.options[obj.selectedIndex].getAttribute('data');
alert(uid)
}<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>回答by chridam
You define custom attributes using the "data" attribute. In your code, there is not custome attribute which I'm sure you wanted it to be an ID. The exact format is "data-*", where "*"is replaced with the desired custom attribute name, then set to the desired string value. So in your code, it should ideally be:
您可以使用“数据”属性定义自定义属性。在您的代码中，没有我确定您希望它是 ID 的客户属性。确切的格式是"data-*"，其中"*"替换为所需的自定义属性名称，然后设置为所需的字符串值。所以在你的代码中，理想情况下应该是：
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data-id="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data-id="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data-id="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data-id="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>
assuming you want the custom attribute to be "id".
假设您希望自定义属性为“id”。
There are two ways you can retrieve the value of "data" attributes using pure JavaScript: in addition to the good old fashion get/setAttribute(), you can also access using the "dataset" property of the element
有两种方法可以使用纯 JavaScript 检索“data”属性的值：除了老式的 get/setAttribute() 之外，您还可以使用元素的“dataset”属性进行访问
Using DOM's getAttribute() property
使用 DOM 的 getAttribute() 属性
function check_status(obj) {
var myoption = obj.options[obj.selectedIndex];
var uid = myoption.getAttribute('data');
alert(uid);
// setting and removing the data-id attribute
myoption.setAttribute("data-id", "foo") //changes "data-id" to "foo"
myoption.removeAttribute("data-id") //removes "data-id" attribute entirely
}
Using JavaScript's dataset property
使用 JavaScript 的 dataset 属性
function check_status(obj) {
var myoption = obj.options[obj.selectedIndex];
var uid = myoption.dataset.id;
alert(uid);
var statusId = myoption.dataset["id"]
alert(statusId);
}
回答by oshell
function check_status(obj){
var uid = obj.options[obj.selectedIndex].getAttribute('data');
alert(uid);
}
