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

Question

我正在尝试从传递给方法的 select 选项访问数据属性。这可能吗？

举个例子，假设我的 html 中有一个 select 列表，如下所示：

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

连接事件处理程序并获取用户的 selection，甚至访问事件处理程序中的数据属性都可以。

<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

抛开拼写错误不谈，您的代码运行良好。

我将 change 事件的选择器更改为 #mySelect，因为您的 select 元素没有 name 属性。
您正在将选定的 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>

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

Passing selected option to method and access data attributes

jquery

jquery-selectors