为什么我的第二个下拉列表是复制第一个下拉列表的更改操作

Question

我有这个 2 个下拉菜单，它们在 onchange 中具有相同的功能，如果我选择快速付款，它应该能够显示快速付款的模式，但问题是第二个下拉列表只是复制第一个下拉列表的操作

<div class="sample" data-key="1001">
<form class="form" id="form-1001">
<select class="form-control">                                                                                                                                
<option value="1">1</option>
<option value="2">2</option>                                                                                                                                            
<option value="express">Make Express Payment</option>
</select>
</form>
</div>
<div class="sample" data-key="1002">
<form class="form" id="form-1002">
<select class="form-control">                                                                                                                                
<option value="1">1</option>
<option value="2">2</option>                                                                                                                                            
<option value="express">Make Express Payment</option>
</select>
</form>
</div>

例如

• 第一个 drpdwn = 1
• 第二个 drpdwn = "快速"按钮

场景将是第二个下拉列表不会显示模态，但如果

• 第一个drpdwn = 快速按钮(将显示模态(
• 第 2 个 DRPDWN = 1

结果将是第二个下拉列表也将显示应该不显示的模态。

这是 jquery 代码$(this).data('key')是 1002 或 1003 。

$( ".sample" ).each(function() {
alert($(this).data('key'));
$( "#form-"+$(this).data('key')).change(function() {
if ($("option:selected"). val() === "express") {
$('#express-payment-modal').modal('show');
}
});
});

Answer 1

你在 change 函数中使用了一个通用的 jQuery 选择器 -$("option:selected")这会给你数组中的两个元素。 当有 val(( 调用时，它会给你数组中第一个元素的值。试试这个——

`$( "#form-"+$(this).data('key')).change(function(e) {
if (e.target.value === "express") {
//...
}
});