javascript - 陷入 .change 循环 - Select2 Drop Down Lists

Question

我有 2 个下拉列表。一种用于人，一种用于企业。如果您从列表中选择一个人，它将自动查询数据库，然后选择与该人相关联的正确对应业务。如果您选择一家公司，它将自动查询数据库以查找与该公司相关的所有人员。然后它会清除当前人员列表并附加相关人员。

这一切都很好......直到我想使用 Select2 使我的下拉列表易于搜索。我现在陷入无限循环，因为 Select2 使用 .val().trigger('change') 方法来选择您想要的值。当它被触发时，它还会触发运行查询并填充字段的 .change 函数。

我该怎么做才能解决这个问题？

这是我的代码:

$('#personNameField').select2();
$('#businessNameField').select2();

/* When a business is selected it then pulls all the associated customers and puts them into the customer name drop down list */
$("#businessNameField").change(function getAssociatedPeople() {
    var sitePath = sitepath.sitePath;
    var business_id = $("#businessNameField").val();
    if (business_id == 'Choose a Company') {
        $('#personNameField').val('Choose a Person').trigger('change');
    }
    else {
        /* Location of the query script that pulls info from the database */
        var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php';
            $.get( url, { business_id: business_id, sitePath: sitePath } )
            .done(function( data ) {
                $('#personNameField').html('<option value="Choose a Person">Choose a Person</option>');
                var results = jQuery.parseJSON(data);
                console.log(data);
                $(results).each(function(key, value) {

                    /* Add the data to the customer name drop down list */

                    $('#personNameField').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>');

                    /* Logs the data in the console */
                    console.log(key);
                    console.log(value);
                })
            });
    }
});
/* When a person is selected it then pulls all the associated business and puts it into the business name drop down list */
$("#personNameField").change(function() {
    var customer_id = $("#personNameField").val();
    var sitePath = sitepath.sitePath;
    if (customer_id == 'Choose a Person') {
        var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php';
        $.get( url, { customer_list: customer_id, sitePath: sitePath } )
        .done(function( data ) {
            $('#businessNameField').val('Choose a Company').trigger('change');
            $('#personNameField').html('<option value="Choose a Person">Choose a Person</option>');
            var results = jQuery.parseJSON(data);
            console.log(data);
            $(results).each(function(key, value) {

                /* Add the data to the customer name drop down list */
                $('#personNameField').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>');

                /* Logs the data in the console */
                console.log(key);
                console.log(value);
            })
        });
    }
    else {
        /* Location of the query script that pulls info from the database */
        var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php';
            $.get( url, { customer_id: customer_id, sitePath: sitePath } )
            .done(function( data ) {
                var results = jQuery.parseJSON(data);
                console.log(data);
                $(results).each(function(key, value) {

                    /* Selects the correct company for the customer selected */

                    $('#businessNameField').val(value.id).trigger('change');

                    console.log(key);
                    console.log(value);
                })
            });
    }
});

Answer 1

我之前没有使用过 Select2，我查看了他们的文档，发现他们有一些自己的事件。

https://select2.github.io/examples.html#programmatic-control

因此，与其将选择器绑定(bind)到 change，不如尝试以下方法:

$("#businessNameField").on("select2:select", function () {...});
$("#personNameField").on("select2:select", function () {...});

我刚刚在下面的这个小例子中尝试过。我在使用 change 时遇到了无限循环，但是一旦我使用了正确的事件，它就没有循环了。

请注意，我导航了嵌套对象以获取每个选择选项的值和文本； e.params.data.id 和 e.params.data.text，其中 e 是传递给回调的事件。

这是一个愚蠢的小例子，选择一个选项会在另一个选项中任意选择一个选项，但你明白了。希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var firstSelect = $(".js-example-basic-single1")
        firstSelect.select2();

        var secondSelect = $(".js-example-basic-single2")
        secondSelect.select2();

        firstSelect.on("select2:select", function (e) {
            var value = e.params.data.id;
            var text = e.params.data.text;
            console.log("firstSelect selected value: " + value);

            if (value === "AL") {
                secondSelect.val("MA").trigger("change");
            }
            else if (value === "WY") {
                secondSelect.val("CA").trigger("change");
            }
        });

        secondSelect.on("select2:select", function (e) {
            var value = e.params.data.id;
            var text = e.params.data.text;
            console.log("secondSelect selected value: " + value);

            if (value === "MA") {
                secondSelect.val("AL").trigger("change");
            }
            else if (value === "CA") {
                secondSelect.val("WY").trigger("change");
            }
        });
    });
</script>
</head>
<body>
<select class="js-example-basic-single1">
    <option value="Default">Default</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
<select class="js-example-basic-single2">
    <option value="Default">Default</option>
    <option value="MA">Massachusetts</option>
    <option value="CA">California</option>
</select>
</body>
</html>