Question

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

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

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

这是我的代码：

Blob

Answer 1

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

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

因此，不是将选择器绑定到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>

卡在循环中.change - 选择2下拉列表

1 个答案: