使用Javascript获取动态创建的选择列表的数据属性

Question

我在动态创建的选择列表上有一个onchange函数，它试图获得数据属性，但我得到了一个"未定义";价值。

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

生成的HTML代码为:

<select onchange="changed_option('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>

任何帮助都将是非常感激的。

Answer 1

给你

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

因为您正在使用onchange事件。这不会为您提供下拉列表的参考。您可以使用下拉列表的id来获取所选值。

Answer 2

您可以将this传递给changed_option以针对正确的元素。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>