Javascript 不止一个下拉菜单弄乱了jQuery/Bootstrap函数

有人能告诉我哪里出了问题吗

基本上，我有一个费用计算器，当用户通过表单处理时，它会计算费用。在本例中，单击时有一个复选框，它应该会弹出一个div并显示费用$225。我试图做的是从下拉列表中添加费用，弹出一个新窗口，询问他们是否要添加该价格

我希望它能在他们点击“接受”时将价格添加到我在表单上的跑步总数中

正确的例子

此示例不正确，这是因为有多个下拉列表“如何修复此错误…”。。此页面上有许多下拉列表。。很明显，我的jQuery函数有问题。 当有多个下拉列表时，您可以从“费用”下拉列表中选择以添加您获得的价格

错误的例子

有人能告诉我我跳过了什么或者我错在哪里吗？我真的很感激任何建议和建议

$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {

                $('#modal_special').find('.modal-title').html($('option:selected', this).data('name'));
                $('#modal_special').find('.modal-body').html('')
                .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/><br/><br/>                 Would you like to add this license plate for: $' + $('option:selected', this).data('price') + ' ?')
                .end().modal('show');
            }
        });

        $('.accept').on('click',function() {
            specialFee = $('option:selected').data('price');
            calculateTotal();
            $('#modal_special').modal('hide');
        });
    });

---

因为应用程序中有两个不同的下拉菜单，所以您需要告诉jQuery哪个下拉菜单具有您想要的所选选项

$('.accept').on('click',function() {
        specialFee = $('#SPECIAL option:selected').data('price');
        calculateTotal();
        $('#modal_special').modal('hide');
    });

---

我所做的只是在这段代码中添加了特殊代码，它工作得很好；否则，有两个选项可用，“月份”下拉列表和“特殊”下拉列表。JQuery选择第一个选项：选中它将查找哪个是月份选择器。

当您指定从哪个下拉列表中获取价格时，需要具体说明：

---

你有几个问题。一个specialFee=$选项：选中。数据为“价格”；您的代码如何知道从哪个选项获取价格？要从第一个或第二个下拉列表中选择选项吗？另外，当你打电话给calculateTotal时，我会把特价费传给你。你并不是从模型中获取价格。您将从数据价格属性中获取它，该属性仅存在于您的特殊下拉列表中。在设置specialFee时，您需要更加具体。类似于特殊选项：selected可能会起作用。它似乎在我的JSFIDLE链接中起作用。或者这不是你想要的行为？抱歉没有看到是的我也看到了用你的小提琴演奏！！我会接受答案的，谢谢！！！

specialFee = $('#SPECIAL option:selected').data('price');