如何在jQuery的change事件中获取元素的data属性值？

当然可以，你可以通过以下几种方式获取data-myid属性的值，以下是针对你现有代码的补充实现：

方法1：使用jQuery的data()方法 #

jQuery的data()方法可以便捷地访问元素的data-*属性，它会自动处理属性名的转换（比如data-myid对应myid）：

jQuery(document).ready(function($) {
  $('.mystatus').on("change", function() {
    var value = this.value;
    alert(value);

    var myid = $(this).data('myid');
    // myid 的值为 '123'（若属性值是数字，会自动转换为number类型）
    console.log(myid);
  });
});

方法2：使用jQuery的attr()方法 #

如果需要严格获取属性的原始字符串值，可以用attr()方法直接读取属性名：

jQuery(document).ready(function($) {
  $('.mystatus').on("change", function() {
    var value = this.value;
    alert(value);

    var myid = $(this).attr('data-myid');
    // myid 的值为字符串 '123'
    console.log(myid);
  });
});

方法3：原生JavaScript方法 #

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

方式A：使用dataset属性（HTML5 API） #

jQuery(document).ready(function($) {
  $('.mystatus').on("change", function() {
    var value = this.value;
    alert(value);

    var myid = this.dataset.myid;
    // myid 的值为 '123'
    console.log(myid);
  });
});

方式B：使用getAttribute()方法 #

jQuery(document).ready(function($) {
  $('.mystatus').on("change", function() {
    var value = this.value;
    alert(value);

    var myid = this.getAttribute('data-myid');
    // myid 的值为字符串 '123'
    console.log(myid);
  });
});

各方法的小区别 #

• data()方法会自动转换属性值的类型（比如data-myid="123"会被转为数字123），且会缓存数据，后续修改data-*属性不会影响data()的返回值。
• attr()、getAttribute()、dataset都会返回属性的原始字符串值，修改data-*属性后，这些方法的返回值会同步更新。

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