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

More than one drop down messing up jQuery / Bootstrap function

本文关键字：jQuery 乱了 Bootstrap 函数 下拉菜单 一个 不止      更新时间：2023-09-26

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

基本上，我有一个费用计算器，当用户处理表单时，它会统计费用。在这个例子中，有一个复选框，点击它会弹出一个div，并显示fees$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');
        });
    });

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

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

我所做的只是在这段代码中添加#SPECIAL，它运行得很好；否则有两个选项可用，月份下拉列表和特殊下拉列表。JQuery选择它找到的第一个"option:selected"，即月份选择器。

当您指定从哪个下拉列表中获取价格时，需要具体说明：http://jsfiddle.net/sww393du/2/

specialFee = $('#SPECIAL option:selected').data('price');
相关文章：