選択したオプションで要素のデータを取得する方法は？

Question

私はjqueryについて基本的な理解を持っていますが、どういうわけか、要素のデータを深く取得できませんでした。

これは、選択ボックス

<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> 

である私のHTML、である私は、データの属性を保持する要素スパンを取得し、その後選択されたオプションは、第1、見つけようとしています。以下は

私の現在のコードで、私は変数string1のに「=」を得ることを期待しかし、これは私に未定義の値を与え、MDNによる

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

Answer 1

をアドバイスしてください、option要素は、テキストのみを含めることができます。実際には、ブラウザはspan要素とその内容を取り除いているようです。

option要素自体にdata-属性を配置します。

Answer 2

ドロップダウン文句を言わないの支持スパンまたはオプション内のタグの任意の種類、あなたはそれがすることによって、それはそこにスパンが表示されません要素を調べる見ることができる、あなたは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>

で attributeを追加することによって、これを達成することができます