Question

愿景是让用户通过发出jQuery AJAX请求的文本框搜索来选择主要银行分行。如果用户随后选择具有其他分支访问权限，则稍后在表单中提供多选（http://loudev.com/）以允许选择一个或多个其他分支。

主分支不能出现在多选的附加分支中，因为用户可能会选择两次相同的分支。

一个关键场景：如果用户返回，清除主分支A并选择主分支B而不是AJAX必须相应地更新其他分支多选，其中现在B是不会出现的分支。这可以无限期重复。</ p>

这里是主分支搜索框，然后是多选框：

<div class="form-group">
    @Html.Label("Search", new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10 searchBranchBox">
        @Html.TextBoxFor(model => model.SearchBranch, new { @class = "form-control", @type = "search", placeholder = "Search for a branch by ID, name or division" })
    </div>
</div>

<div class="form-group additionalBranchAccessSelection">
    @Html.Label("Select Branches", new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10 selectBranches" style="margin-top: 8px">
        <select class="searchable" multiple="multiple" id="AdditionalBranchAccessSelection" name="@Model.AdditionalBranchAccessSelection">
        </select>
    </div>
</div>

返回的AJAX数据将使用选项标签填充上面的选择标记。这是AJAX请求函数：

function ajaxFilterAdditionalBranchWebDevDb(searchTerm, event, ui) {
    $.ajax({
        url: "/NewUserForm/FilterAdditionalBranches",
        type: "POST",
        dataType: "json",
        data: {
            query: searchTerm,
            __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()
        },
        success: function (data, status, xhr) {
            console.log(data);
            var output = [];
            $.each(data, function (key, value) {
                output.push("<option value='" + key + "'>" + value.branchName + "</option>");
            });
            $("#AdditionalBranchAccessSelection").html(output.join(""));
            $("#AdditionalBranchAccessSelection").multiSelect();
        }
    });
}

使用搜索框的自动完成功能调用AJAX函数：

$searchBranch.autocomplete({
    minLength: 3,
    source: .............,
    focus: ..............,
    select: function (event, ui) {
        ajaxFilterAdditionalBranchWebDevDb(ui.item.label, event, ui)
        return false;
    }
})
.autocomplete("instance")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
    };
});

这里有一个函数，用于清除搜索框并删除Loudev库创建的多选：

$searchBranch.on("input propertychange paste", function () {
    if ($searchBranch.val() == "") {
        // What Loudev's library does is hides your default select tag filled with option tags and then in its place creates a custom multiselect div of class .ms-container with an id of #ms-WhateverYourPriorSelectTagIdWas. 
        $("#ms-AdditionalBranchAccessSelection").remove();
    }
});

问题是当我在包含multiselect的div id上明确调用.remove（）方法时，调用上面的clear函数时，Loudev的多选列表项不会被删除。从每个后续AJAX请求中检索的数据将被标记到多选列表中。

例如，您有3个分支：加州| 纽约| 德克萨斯州

您搜索并选择加利福尼亚作为主要分支，您的多选列表将显示：纽约| 德克萨斯

精细。然后你清除加利福尼亚州，去搜索并选择纽约作为你的主要分支......现在重复项出现在多选列表中：纽约| 德克萨斯州加州| 德克萨斯

清除纽约并选择德克萨斯州，多选重复项增长：纽约| 德克萨斯州加州| 德克萨斯州加州| 纽约

1）为什么重复出现？ 2）如果单击重复的行项目，为什么会出现以下错误？ 3）如何修复多选列表？

Uncaught TypeError: Cannot read property 'length' of undefined
    at Function.map (jquery-1.11.3.min.js:3)
    at MultiSelect.select (jquery.multi-select.js:361)
    at HTMLLIElement.<anonymous> (jquery.multi-select.js:76)
    at HTMLUListElement.dispatch (jquery-1.11.3.min.js:7)
    at HTMLUListElement.r.handle (jquery-1.11.3.min.js:7)

Answer 1

Loudev的多选库如何工作，它首先隐藏了填充了选项标签的select标签，然后将它们转换为类似的东西：

SELECT userid FROM table 
WHERE (data = 1 AND filedid = 41) 
OR (data = 0 AND filedid = 12)

我如何解决重复问题是在清除我添加的分支搜索框的函数中：

<div class="ms-container" id="ms-WhateverYourOriginalIdWas">
    <div class="ms-selectable">
        <ul class="ms-list" tabindex="-1">
            <li class="ms-elem-selectable" id="48-selectable"><span>Item 1</span></li>
            <li class="ms-elem-selectable" id="50-selectable"><span>Item 3</span></li>
        </ul>
    </div>
    <div class="ms-selection">
        <ul class="ms-list" tabindex="-1">
            <li class="ms-elem-selection" id="49-selection"><span>Item 2</span></li>
        </ul>
    </div>
</div>

清空列表中的所有内容。接下来清空容器中的所有内容，其中包含列表。最后，完全摆脱容器。

解决方案似乎有点矫枉过正，但它确实有效。

为什么Loudev jQuery multiselect会产生重复项？

1 个答案: