Javascript 3选择元素，但产生6个值。为什么？_Javascript_Jquery

Javascript 3选择元素，但产生6个值。为什么？

javascript jquery

Javascript 3选择元素，但产生6个值。为什么？,javascript,jquery,Javascript,Jquery,我有这个HTML结构： <div id="kurir_list"> <div class="row"> <div class="col-sm-6"> <div class="form-group form-group-default form-group-default-select2 required"> <select class="tarif full-width" d

我有这个HTML结构：

<div id="kurir_list">
    <div class="row">
        <div class="col-sm-6">
          <div class="form-group form-group-default form-group-default-select2 required">
            <select class="tarif full-width" data-init-plugin="select2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
          </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
          <div class="form-group form-group-default form-group-default-select2 required">
            <select class="tarif full-width" data-init-plugin="select2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
          </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
          <div class="form-group form-group-default form-group-default-select2 required">
            <select class="tarif full-width" data-init-plugin="select2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
          </div>
        </div>
    </div>
</div>

为什么警报对话框会生成6次而不是3次

第一：空的第二个：第一个select元素的1或2 第三：空的第四：第二个选择元素的1或2 第五：空的第六：第三个选择元素的1或2 如何获得所选元素的精确值并忽略空值？请注意，这不仅仅是HTML选择，而是使用插件

更新：这是我完整的javascript代码

(function($) {

    'use strict';

    $(document).ready(function() {

        $('#rootwizard').bootstrapWizard({
            onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index + 1;

                // If it's the last tab then hide the last button and show the finish instead
                if ($current >= $total) {
                    $('#rootwizard').find('.pager .next').hide();
                    $('#rootwizard').find('.pager .finish').show().removeClass('disabled hidden');
                } else if ($current == 2) {

                    if ($(".tarif").is(":disabled")) {
                        $('#rootwizard').find('.pager .next').hide();
                        $('#rootwizard').find('.pager .finish').hide();
                    }

                    $(".tarif").change(function() {
                        if ($(".tarif").is(':disabled')) {
                            $('#rootwizard').find('.pager .next').hide();
                        } else {

                            var emptySelect = false;
                            $('#kurir_list select').each(function(){
                                if (!$(this).find('option:selected').val()) {
                                    emptySelect = true;
                                }
                            });

                            if (emptySelect == false ) {
                                $('#rootwizard').find('.pager .next').show();
                            } else {
                                $('#rootwizard').find('.pager .next').hide();
                            }
                        }

                        $(".tarif").each(function() {
                            alert ($(this).val());
                        });

                        var selected_tarif = $(this).val();
                        var ongkir2 = $("#ongkir2").text();
                        ongkir2 = ongkir2.replace(/\D/g,"");

                        var new_ongkir2 = parseInt(ongkir2) + parseInt(selected_tarif);
                        new_ongkir2 = addCommas(new_ongkir2);
                        $("#ongkir2").text("Rp "+new_ongkir2);
                    });

                    $(".kurir").change(function() {
                        var selected_courier = $(this).val();
                        var token = $(this).data('token');
                        var productid = $(this).data('productid');
                        var city = $("#city").val();
                        var area = $("#area").val();
                        var quantity = $(".orderlist2").find("."+productid).find(".quantity").text();
                        quantity = quantity.replace(/\D/g,"");

                        var json_url = "SOME URL HERE";
                        $.ajax({
                            url: json_url,
                            dataType: "JSON",
                            success: function(json){

                                var rate_tarif = "";
                                var selected_tarif = "";

                                $.each(json, function(i,o){
                                    rate_tarif += "<option value="+o.tarif+">"+o.rate+"</option>";
                                });

                                $("#tarif-"+productid).append(rate_tarif).change();

                                event.preventDefault();
                                $("#tarif"+productid).prop("disabled", false);

                                selected_tarif = $("#tarif-"+productid).val();
                            }
                        });
                    });

                    $("#state").change(function() {
                        $('#rootwizard').find('.pager .next').hide();
                    });

                } else {
                    $('#rootwizard').find('.pager .next').show();
                    $('#rootwizard').find('.pager .finish').hide();
                }
            },
            onNext: function(tab, navigation, index) {
                console.log("Showing next tab");
            },
            onPrevious: function(tab, navigation, index) {
                console.log("Showing previous tab");
            },
            onInit: function() {
                $('#rootwizard ul').removeClass('nav-pills');
            }

        });
    });

})(window.jQuery);

你随后的评论解释了这一点：

您拥有的是纯HTML，而在我的例子中使用的是Select2插件

select2的工作方式是，它隐藏您的select元素而不删除它们，并创建一个新的结构，将您的类等复制到其中。因此，最终得到的是HTML中的.tarif元素，以及select2创建的.tarif元素

您可以通过缩小选择器的范围来限制响应的选项：

$("select.tarif").change(function() {
    $("select.tarif").each(function() {
        alert ($(this).val());
    }); 
});

您可以在示例页面上看到select2的功能

以下是第一个示例的前一部分：

<select class="js-states form-control">
  <!--...options and such...-->
</select>

以下是下文：

<select class="js-example-basic-single js-states form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
      <!--...options and such...-->
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-438s-container"><span class="select2-selection__rendered" id="select2-438s-container" title="Alaska">Alaska</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

请注意原始select是如何隐藏的，js状态和表单控件类是如何从select复制到select2生成的span中的。

您随后的注释对此进行了解释：