次の html を使用して、MVC ビューで選択した複数選択ウィジェットを使用しています。
@Html.DropDownListFor(m => m.Branch, new SelectList(ViewBag.Branches, "Value", "Text"), new { @class = "chzn-select-deselect", data_placeholder = "Select Branch", @multiple = "true" })
そして、入力タイプが送信されているビューに更新アイコンがあります。クリックすると、次のコードがあります。
$("#dbRefresh").click(function (e) {
e.preventDefault();
var Form = $("form[id='FrmDashBoard']");
Form.validate();
if (Form.valid()) {
Form.find('ul').empty();
var fromDate = $("#FromDate").val();
var toDate = $("#ToDate").val();
var BranchList = $("#Branch").val();//chosen multiselect widget
var BranchString = "";
if (BranchList != null)
$.each(BranchList, function (index, item) {
BranchString += item + ",";
});
if (BranchString.length > 0)
BranchString = BranchString.slice(0, -1);
$.ajax({
type: "POST",
url: '@Url.Action("SetDashBord_DateFilter", "Home")',
dataType: "json",
data: { FromDate: fromDate, ToDate: toDate, Branches: BranchString }
});
DisplayPOXOrderStatistics(fromDate, toDate, BranchString);
DisplayPOXCompletedOrdersData(fromDate, toDate, BranchString);
DisplayHSTOrderStatisticsData(fromDate, toDate, BranchString);
DisplayPOXCompletedOrderPieChart(fromDate, toDate, BranchString);
DisplayCurrentYearlyTrends(BranchString);
}
$("#Branch").trigger("liszt:updated");
return false;
});
上記で呼び出されたすべての関数は、このビューからの html の一部が更新される ajax 呼び出しと onsuccess だけを実行しています (一部の div 要素の内部 html)。
ブランチの複数選択を選択した場合の問題は、更新ボタンをクリックしたときです。クラス chzn-choices を持つ ul のすべての li 要素がクリアされます。そのため、選択したウィジェットが画面に太い線で表示されます。つまり、li 要素が削除されたため、ul 要素の高さが 0 に設定されます。選択したウィジェットで何がうまくいかないのか、誰か教えてもらえますか?