ビジョンは、ユーザーがjQuery AJAXリクエストを発行するテキストボックス検索を通じてプライマリ銀行支店を選択することです。その後、ユーザーが追加のブランチアクセスを選択すると、後で複数のブランチを選択できるように、マルチセレクション（http://loudev.com/）がフォームに表示されます。Loudev jQueryが複数選択を作成するのはなぜですか？
ユーザが同じブランチを2回選択する可能性があるため、プライマリブランチをマルチセレクションブランチに追加することはできません。
重要なシナリオ：ユーザーが元のブランチAをクリアしてプライマリブランチBを選択した場合、AJAXはそれに応じて追加のブランチマルチセレクションを更新する必要があります。ここでBは表示されません。これは無期限に繰り返すことができます。
はここで主枝の検索ボックスだし、次に複数選択ボックス：
<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データは、オプションタグと上記のselectタグに移入されます返さ。 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();
}
});
}
：ここ
$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のライブラリが作成した複数選択を削除するために呼ばれています機能です。ここAJAX要求機能です：
$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();
}
});
問題は、上記の明確な関数が呼び出されたときに、私ははっきり.remov呼び出されたときにLoudevの複数選択リスト項目が削除されませんということですmultiselectを含むdiv idのe（）メソッドその後のすべてのAJAX要求から取得されたデータは、代わりにマルチセレクトリストにタグ付けされます。
たとえば、次の3つのブランチがあります。 カリフォルニア州| ニューヨーク| テキサス
カリフォルニアを主枝として検索して選択すると、複数選択リストに次のように表示されます。 ニューヨーク| テキサス
Fine。次に、カリフォルニアを消去し、検索して、ニューヨークを主要ブランチとして選択します.....ここで、重複リストが複数選択リストに表示されます。 ニューヨーク| テキサス州| カリフォルニア州| テキサス
ニューヨークをクリアしてテキサスを選択すると、複数選択の複製が増えます。 ニューヨーク| テキサス州| カリフォルニア州| テキサス州| カリフォルニア州| ニューヨーク
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)