在最近的開發程序中，應用了一些關于knockout的下拉專案，
關于下拉多選的開發在這里做一個記錄，
下面直接上代碼
添加的時候，無需給初始值
--viewmodel
function ViewModel() { //崗位下拉系結 this.postName = ko.observableArray([]); };
添加了一個觸發，根據部門獲得對應的崗位
//根據部門ID去獲得對應的崗位下拉選項 function jsSearchData(obj) { var depId = $(obj).val(); if ($.trim(depId) != "") { console.log("type=" + depId); $.getJSON("@Url.Action("Json_GetSelectPostAccordingToDepartmentId")", { DepartmentId: depId }, function (data) { viewModel.postName(data); }); } else { viewModel.postName([]); $("select[name=PostName]").trigger("change"); } }
@Html.DropDownList("DepartmentId", ViewBag.DepartmentId as SelectList, new { @class = "select2 required", onchange = "jsSearchData(this);", @style = "width:120px;" })<select data-bind="options:$root.postName,optionsText:'Text',optionsValue:'Value'" style="width:200px;" name="PostName" multiple></select>
后臺獲得對應的資料
/// <summary> /// 根據部門ID獲得對應所有的崗位 /// </summary> /// <param name="DepartmentId"></param> /// <returns></returns> public ActionResult Json_GetSelectPostAccordingToDepartmentId(int? DepartmentId) { var list = new DepartmentJobService().FindAll(x => x.DEPARTMENT_ID == DepartmentId).Select(x => new SelectListItem() { Value = https://www.cnblogs.com/Gary-P/p/x.NAME, Text = x.NAME }); return Json(list, JsonRequestBehavior.AllowGet); }編輯的時候，需要把對應系結的值初始化
其他代碼都一樣，我這里只給初始化的代碼
function ViewModel() {
//這里傳進來的引數類似于"行政助理,行政前臺"這樣的一個字串，按逗號給他分割成一個陣列，這個陣列的組成就是select下拉的初始值 this.ownDepartmentSelectedOptions = ko.observableArray("@ownDepartmentPostName".split(",")); };
<select data-bind="options:postName,optionsText:'Text',optionsValue:'Value',selectedOptions:ownDepartmentSelectedOptions" style="width:200px;" name="PostName" multiple></select>
關于下拉多選（multiple）給初始值，是由selectedOptions進行系結的，把需要系結的初始值序列化成陣列系結上去就可以了，初始化后的結果類似下面這個，
關于基本的系結那些我就略過了，大概功能代碼就是這些了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/81849.html
標籤：C#