Menu
I have this 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
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
244
Now we have the selected option we can get its attribtues var attrs = option.attributes; attrs is the attributes array you can get attribtues by index you want. Or you can get attribtues by var datarc = option.getAttribute("data-rc");
No jQuery. Instead, use DOM API, from which we can use either dataset property or getAttribute method of the corresponding DOM element. – Lex Soft Mar 7 '19 at 6:13
If you want to get the values of the selected option, I edited the answer. If you want to get allthe values, you'll have to iterate. Anyway, now you get the general idea.
Nowadays I tend to be reluctant to dig deeper into HTML elements/nodes with their properties/methods. I prefer using dataset, instead of getAtttibute, although dataset may not work in some browsers. – Lex Soft Mar 7 '19 at 6:05
The problem is that you get select element and not selected option element as function argument. And it does not have the data attribute. You have to get the option attribute like so:
function check_status(obj) { var uid = obj.options[obj.selectedIndex].getAttribute('data-uid'); alert(uid); }<select onchange="check_status(this);" name="status[171]"> <option selected="true" value="open" data-uid="01f2cf35e4d7a1c0158459fd0450a601">open</option> <option value="in_process" data-uid="02f2cf35e4d7a1c0158459fd0450a602">pending</option> <option value="finished" data-uid="03f2cf35e4d7a1c0158459fd0450a603">finished</option> <option value="canceled" data-uid="04f2cf35e4d7a1c0158459fd0450a604">canceled</option> </select>data-uid for it to be valid according to HTML5 specificaion.
95
You are trying to get select data attribute, and not option's.
Also, I can see that all you data attributes 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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
