将选定选项传递给方法和访问数据属性

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. 我改变了选择的change事件#mySelect，因为你的select元素没有一个name属性。
2. 您正在将选中的option存储到一个名为selection的变量中，但在后面的行（var data1 = selected.data('data1');）中，您调用的是一个不存在的变量，称为selected，这会导致JS崩溃。

$("#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>