javascript - 不止一个下拉菜单搞乱了 jQuery/Bootstrap 函数

Question

谁能告诉我哪里出错了？

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

我希望它在他们点击接受时将价格添加到我在表格上的运行总计中。

正确的例子 http://jsfiddle.net/hwcu7e05/5/

这个例子是不正确的，因为有不止一个下拉菜单我该如何解决这个错误..这个页面有很多下拉菜单..很明显我的 jQuery 函数有问题。 当有多个下拉列表并且您从费用下拉列表中选择添加一个价格时，您会得到 NaN

不正确的例子 http://jsfiddle.net/sww393du/

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

$(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');
        });
    });

Answer 1

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

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

我所做的只是将#SPECIAL 添加到这部分代码并且它运行良好；否则有两个选项可用，月份下拉菜单和特殊下拉菜单。 JQuery 选择它找到的第一个“option:selected”，这是月份选择器。