Question

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

举个例子，假设我的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

除了错别字，你的代码工作正常。

我将change事件的选择器更改为#mySelect，因为您的select元素没有name属性。
您已将选定的option存储到名为selection的变量中，但在后面的行（var data1 = selected.data('data1');）上，您调用了一个名为{{的不存在的变量1}}崩溃了你的JS。

＆＃13;

selected

＆＃13;

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

＆＃13;

将所选选项传递给方法并访问数据属性

1 个答案: