Leon Armstrong Leon Armstrong - 21 days ago 5
HTML Question

How to get data of an element in selected option?

I have basic understand on jquery , but somehow I failed to get the data of an element in depth.

This is my HTML , which is a select box

<select id="from_acc">
<option value="1" selected="selected">Apple<span class="cr_info" data-value="1.00000" data-symbol="="></span></option>
<option value="1">Orange<span class="cr_info" data-value="2.00000" data-symbol="*"></span></option>
</select>


I am trying to find the selected option first and then get the element span which hold the data attribute.

Below is my current code , I expect to get a '=' in variable string1 but this gave me a undefined value , Please advice

string1=$('#from_acc').find('option:selected').find('.cr_info').data('symbol');
alert(string1);

Answer

According to MDN, option elements can only contain text. In practice, it appears that browsers strip the span elements and their content.

Place the data- attributes on the option elements themselves.