3选择元素,但生成6个值.为什么？

Question

我有这个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>

我有这个jquery:

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

为什么警报产生6次对话框,而不是3？

• 第一:空
• 第二:第一个选择元素的1或2
• 第三:空
• 第四:第二选择元素的1或2
• 第五名:空
• 第六:第三选择元素中的1或2

如何获取所选元素的精确值并忽略空值？请注意,这不仅仅是HTML选择,而是使用Select2插件.

更新:这是我完整的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);

Answer 1

您随后的评论解释了它:

你有什么是纯HTML,而在我的情况下是使用Select2插件

方法select2有效,它隐藏你的select元素(不删除它们)并创建一个新的结构,复制你的类等等.因此,您最终.tarif会得到HTML中的.tarif元素,以及select2创建的元素.

您可以通过缩小选择器来限制您响应的那些:

$("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-states和form-control类复制select到select2生成的文件中span.