Question

194

PURE JS get selected option data attribute value returns Null

rated 0 times [ 200] [ 6] / answers: 1 / hits: 25513 / 10 Years ago, thu, january 22, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micayla

Add To Favorites

Follow

Total Points: 148

Total Questions: 92

Total Answers: 109

Location: Aruba

Member since Sat, Oct 2, 2021

3 Years ago

micayla questions

1 Web3 Issue : React Application not compiling

Fri, Dec 24, 21, 00:00, 2 Years ago

1 How to add margin in materialize css?

Thu, Apr 16, 20, 00:00, 4 Years ago

1 How can I use Material-UI Autocomplete together with react-virtualized?

Mon, Dec 9, 19, 00:00, 5 Years ago

1 Highlight rows in MUI-Datatables

Thu, Nov 14, 19, 00:00, 5 Years ago

1 Mock using jest moment().format is returning current date instead of mocked date

Tue, Aug 27, 19, 00:00, 5 Years ago

View All

answered 10 Years ago darrylm · Accepted Answer

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>

Notice that I changed the attribute name to data-uid for it to be valid according to HTML5 specificaion.