How to get data of an element in selected option?

Question

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 1

Drop down wont support span or any kind of tag in option, you can see it by inspect element it will not show span there, you can achieve this by adding attribute in option

$(document).ready(function(){
$("#from_acc").change(function(){ 
        var symbol = $(this).find('option:selected').data('symbol');
        var value = $(this).find('option:selected').data('value'); 
        alert("symbol: "+ symbol +" value: "+ value )
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="from_acc">
<option value="1" selected="selected" data-symbol="=" data-value="1.00000">Apple</option>
<option value="1" data-symbol="*" data-value="2.00000">Orange</option>
</select>

Answer 2

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.