使用jQuery的select onchange事件获取选中的选项数据属性

当我们需要从 <select> 元素中获取选中的选项数据属性时，我们可以使用jQuery的 change() 方法来检测选择列表的更改，并调用回调函数来处理每个更改。

HTML代码

我们首先要在HTML中创建一个 <select> 元素，并设置一些选项。

<select id="my-select">
  <option value="1" data-info="Option #1">Option #1</option>
  <option value="2" data-info="Option #2">Option #2</option>
  <option value="3" data-info="Option #3">Option #3</option>
</select>

jQuery代码

我们可以使用以下代码来获取选中选项的数据属性：

$('#my-select').change(function() {
  var selected = $(this).find('option:selected');
  console.log(selected.data('info'));
});

首先，我们绑定了 change 事件到 <select> 元素上，并指定一个匿名函数作为回调函数。

接着，当事件触发时，我们使用 find() 方法来获取当前选中的选项，然后使用 data() 方法检索选项的 data-info 数据属性的值，并将其打印到控制台中。

注意，我们使用了 $() 函数来将元素包装在jQuery对象中，从而可以调用jQuery方法。同时，我们使用 option:selected 选择器来获取被选中的选项。

代码解释

让我们逐一解释上述代码的每一部分：

$('#my-select').change(function() {
  //...
});

首先，我们使用 $() 函数和选择器 #my-select 来找到我们的 <select> 元素，并在元素上附加一个 change 事件处理程序。

var selected = $(this).find('option:selected');

当事件被触发时，我们使用 $(this) 来引用触发事件的元素，并使用 find() 方法来获取当前选中的选项。

console.log(selected.data('info'));

最后，我们使用 data() 方法来检索选项的 data-info 数据属性的值，并将其打印到控制台中。

结论

通过以上代码，我们简单易懂地向大家展示了如何使用jQuery的select onchange事件获取选中的选项数据属性。