選択したオプションをメソッドに渡してデータ属性にアクセスする

Question

メソッドに渡された選択オプションからデータ属性にアクセスしようとしています。これは可能ですか？一例として、

は、次のように私は私のhtmlで選択リストがあるとします。

<div class="col-md-3"> 
    <select id="mySelect" name="mySelect"> 
    <option value="1" data-data1="AB" data-data2="WX">Route1</option> 
    <option value="2" data-data1="CD" data-data2="YZ">Route2</option> 
    </select> 
</div> 

配線アップイベントハンドラと、ユーザーの選択を取得しても、イベントハンドラが細かい内のデータの属性にアクセスします。

<script> 
$(function() { 
    $("select[name='mySelect']").on('change', function() { 
    var selection = $(this).find('option:selected'); 
    //no problem accessing the attributes here: 
    var data1 = selected.data('data1'); 
    var data2 = selected.data('data2'); 

    //but what if I want to pass the selection object to a method? 
    doSomething(selection); 
    }); 
}); 

次の方法で属性値を取得するアプローチはどちらも機能しません。これは可能ですか？もしそうなら、私は何が欠けていますか？

function doSomething(selection) 
{ 
    var data1 = selection.data('data1'); 
    var data2 = selection.data('data2'); 

    var data3 = $(selection).data('data1'); 
    var data4 = $(selection).data('data2'); 
} 
</script> 

Answer 1

タイピングはさておき、あなたのコードはうまくいきます。

1. あなたselect要素がname属性を持っていなかったので、私は、#mySelectにchangeイベントのセレクターを変更しました。
2. selectionという変数に選択したoptionを保存していますが、その後に続く行（var data1 = selected.data('data1');）には、JSをクラッシュさせた存在しない変数selectedを呼び出していました。

$("#mySelect").on('change', function() { 
 
    var selection = $(this).find('option:selected'); 
 
    doSomething(selection); 
 
}); 
 

 
function doSomething(selection) { 
 
    var data1 = selection.data('data1'); 
 
    var data2 = selection.data('data2'); 
 
    console.log('data1', data1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <select id="mySelect"> 
 
    <option value="1" data-data1="AB" data-data2="WX">Route1</option> 
 
    <option value="2" data-data1="CD" data-data2="YZ">Route2</option> 
 
    </select> 
 
</div>