如何在jQuery中获取下拉框选中项的data-payvalue属性？

首先先修正你原代码里的语法错误：$"select[name=time]") 缺少左括号，应该写成 $("select[name=time]")，否则会直接报错。

下面提供两种常用的实现方式，都能同时获取选中项的value和data-payvalue属性：

方法1：使用jQuery选择器 + 数据属性方法 #

通过:selected选择器定位到当前选中的<option>元素，再用jQuery的.data()或.attr()方法获取data-payvalue的值：

$("select[name=time]").on('change', function(e) {
    // 定位选中的option元素
    const selectedOption = $(this).find(":selected");
    // 获取value值
    const selectedValue = selectedOption.val();
    // 获取data-payvalue值（两种方式二选一）
    const payValue = selectedOption.data('payvalue'); // 自动转换属性值类型（比如数字会变成Number）
    // const payValue = selectedOption.attr('data-payvalue'); // 直接返回字符串类型

    console.log('选中的value:', selectedValue);
    console.log('对应的data-payvalue:', payValue);
});

方法2：结合原生JavaScript实现 #

如果想减少jQuery依赖，也可以用原生JS直接操作DOM元素：

$("select[name=time]").on('change', function(e) {
    // this指向当前的select元素
    const selectEl = this;
    // 通过selectedIndex拿到选中的option元素
    const selectedOption = selectEl.options[selectEl.selectedIndex];
    // 获取value值
    const selectedValue = selectedOption.value;
    // 获取data-payvalue值（两种方式二选一）
    const payValue = selectedOption.dataset.payvalue; // 自动转换类型
    // const payValue = selectedOption.getAttribute('data-payvalue'); // 返回字符串

    console.log('选中的value:', selectedValue);
    console.log('对应的data-payvalue:', payValue);
});

说明：.data()和dataset.payvalue会自动将data-payvalue的属性值转换为对应的数据类型（比如示例中的2300、2301会变成Number类型）；而.attr()和getAttribute()会直接返回原始的字符串类型，可根据你的业务需求选择。

内容的提问来源于stack exchange，提问作者Dimitrios Desyllas