JavaScript获取动态生成Select下拉列表data属性返回undefined问题

• 内联onchange触发函数时，函数内部的this默认指向window对象，不是当前触发事件的select节点，$(this)根本拿不到下拉框元素，查找选中option自然返回undefined。
• 代码里第二个alert变量名写错，把change_amount写成了change_action，就算前面逻辑正常，第二个弹窗也会显示错误值。
• 动态生成的option标签里，两个data-*属性之间没有加空格，存在属性解析异常的隐患。

方案1：修改内联事件传参 #

给内联调用的函数传入当前select元素的引用，修改HTML的onchange属性：

<select onchange="changed_option(this, 'QKCLASS01NB','1282389738','price_QKCLASS01NB','125.00')" class="form-control col-md-10 center" id="1282389738" required="required" name="attributes[Payment Option]">
  <option value="">---Select Option---</option>
  <option data-change_action="0" data-change_amount="0.00">Full Price</option>
  <option data-change_action="2" data-change_amount="20.00">Down Payment</option>
</select>

对应修改事件函数，接收传入的select元素：

function changed_option(selectEl, barcode, id, priceid, price){
  var barcode = barcode;
  var record = id;
  var change_action = $(selectEl).find(':selected').data('change_action');
  var change_amount = $(selectEl).find(':selected').data('change_amount');
  alert("Change Action: "+change_action);
  alert("Change Amount: "+change_amount);
}

方案2：用jQuery事件委托绑定（更推荐动态元素场景） #

去掉HTML里的内联onchange属性，把固定参数也存在select的data属性上，通过事件委托统一绑定逻辑，这种方式不用给每个动态生成的select写重复的内联事件，this会自动指向当前触发事件的select元素：
修改后的HTML：

<select class="form-control col-md-10 center payment-select" id="1282389738" required="required" name="attributes[Payment Option]" data-barcode="QKCLASS01NB" data-priceid="price_QKCLASS01NB" data-price="125.00">
  <option value="">---Select Option---</option>
  <option data-change_action="0" data-change_amount="0.00">Full Price</option>
  <option data-change_action="2" data-change_amount="20.00">Down Payment</option>
</select>

JS绑定逻辑（要在页面DOM加载完成后执行，委托到页面初始就存在的父节点即可，比如document）：

$(function() {
  $(document).on('change', '.payment-select', function() {
    const $currentSelect = $(this);
    const barcode = $currentSelect.data('barcode');
    const recordId = $currentSelect.attr('id');
    const change_action = $currentSelect.find(':selected').data('change_action');
    const change_amount = $currentSelect.find(':selected').data('change_amount');
    alert("Change Action: " + change_action);
    alert("Change Amount: " + change_amount);
  })
})

jQuery的.data()方法读取data-*属性时会自动做类型转换，比如你写的data-change_action="0"会被转成数字类型0，如果需要获取原始字符串值，可以改用.attr('data-change_action')方法读取。

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