jQuery组合框插件-如何从jQuery组合盒中获取getSelectedIds

Question

我在一个html中使用两个Jquery ComboBox对象。如何将每个组合对象中的selectedId设置为相应的隐藏输入对象。在这里，从ddlDepotMapping中选择的Id应该存储在hfDepotMap中。此外，从ddlSalaryMapping中选择的Id应存储在hfSalaryMap中。但当加载html页面时，Jquery ComboBox selected属性上没有选择查看行李列表项

这是代码

public IActionResult UserSetup
{
List<GoUserDepartLink> mapping = _unitOfWork.UserDepartmentLink.GetAllDepartmentsByUserWithDepot(id);
List<UserSalaryLocationLink> salaryMapping = _unitOfWork.User.GetUserSalaryLocations(id);
user.SelectedDepotMapping = String.Join(",", mapping.Select(x => x.DepotNo + "." + x.DepartmentID).ToArray()) + "," + String.Join(",", mapping.Select(x => x.DepotNo).Distinct().ToArray());
user.SelectedSalaryMapping = String.Join(",", salaryMapping.Select(x => x.DepotNo + "." + x.DepartmentID).ToArray()) + "," + String.Join(",", salaryMapping.Select(x => x.DepotNo).Distinct().ToArray());
ViewBag.DepotDepartmentMapping = "[" + user.SelectedDepotMapping + "]";
ViewBag.DepotLocationMappingForSalary = "[" + user.SelectedSalaryMapping + "]";
}
public JsonResult GetDepotDepartemntsForMap()
{
dynamic mappingList = new List<DepotMapModel>();
mappingList = _unitOfWork.Department.GetDepotWithDepartment();
return Json(mappingList);
}

public dynamic GetDepotWithDepartment()
{
var list = goContext.goDepartmentWorkTime.
GroupBy(d => new { d.DepotNo, d.Depot.DepotName })
.Select(g => new
{
id = g.Key.DepotNo,
title = g.Key.DepotName,
subs = g.Select(dd => new
{
id = dd.DepotNo + "." + dd.DepartmentID,
title = dd.Depot.DepotNo + "." + dd.Department.DepartmentName
}).ToList()
}).ToList();

return list;
}

<script>
FillDepartmentsMappings(@ViewBag.DepotDepartmentMapping);
FillSalaryDepotsMappings(@ViewBag.DepotLocationMappingForSalary);
//hfDepotMapping.Val(ddlDepotMapping.selectedIds) 
// hfSalaryMapping.Val(ddlSalaryMapping.Selectedids)


function FillDepartmentsMappings(defaultSelected) {
$.ajax({
type: "GET",
url: "/User/GetDepotDepartemntsForMap",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#ddlDepotMapping').comboTree({
source: data,
isMultiple: true,
cascadeSelect: true,
collapse: true,
selected: defaultSelected
});
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
}
function FillSalaryDepotsMappings(defaultSelected) {
$.ajax({
type: "GET",
url: "/User/GetDepotDepartemntsForMap",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#ddlSalaryMapping').comboTree({
source: data,
isMultiple: true,
cascadeSelect: true,
collapse: true,
selected: defaultSelected
});
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}

});


}
</Script>

<div class="controls col-sm-9">
<input type="text" id="ddlDepotMapping" placeholder="Select" />
<input type="hidden" id="hfDepotMapping" asp-for="SelectedDepotMapping" />
</div>
<div class="controls col-sm-9">
<input type="text" id="ddlSalaryMapping" placeholder="Select" />
<input type="hidden" id="hfSalaryMapping" asp-for="SelectedSalaryMapping" />
</div>

GetDepotWithDepartment((以下面给出的格式返回值。我必须调用中的函数

{ id = 1, title = "1-DepotName1", subs = {System.Collections.Generic.List<<>f__AnonymousType10<string, string>>} }
subs: { id = "1.1", title = "1.Retail" }
{ id = "1.2", title = "1.Office" }
{ id = "1.3", title = "1.Warehouse" }
{ id = 2, title = "2-DepotName2", subs = {System.Collections.Generic.List<<>f__AnonymousType10<string, string>>} }
subs { id = "2.1", title = "2.Retail" }
{ id = "2.2", title = "2.Office" }
{ id = "2.3", title = "2.Warehouse" }

因此，我必须从url调用函数GetDepotWithDepartment："/User/GetDepotDepartmentsForMap"；以获取要填充在comboBox中的数据，该数据位于字符串GetDepotDepartmentsForMap((函数的位置。

Answer 1

确保所选配置是类型的数组。

你可以在js中设置数组，如下所示：

selected: [defaultSelected]

后端代码：

ViewBag.DepotDepartmentMapping = 1;
ViewBag.DepotLocationMappingForSalary = 10;

整个工作演示：

视图(Index.cshtml(：

@model Test
<div class="controls col-sm-9">
<input type="text" id="ddlDepotMapping" placeholder="Select" />
<input type="hidden" id="hfDepotMapping" asp-for="SelectedDepotMapping" />
</div>
<div class="controls col-sm-9">
<input type="text" id="ddlSalaryMapping" placeholder="Select" />
<input type="hidden" id="hfSalaryMapping" asp-for="SelectedSalaryMapping" />
</div>
@section Scripts
{
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/lib/Drop-Down-Combo-Tree/style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="~/lib/Drop-Down-Combo-Tree/comboTreePlugin.js"></script>
<script>
FillDepartmentsMappings(@ViewBag.DepotDepartmentMapping);
FillSalaryDepotsMappings(@ViewBag.DepotLocationMappingForSalary);
function FillDepartmentsMappings(defaultSelected) {
$.ajax({
type: "GET",
url: "/User/GetDepotDepartemntsForMap",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#ddlDepotMapping').comboTree({
source: data,
isMultiple: true,
cascadeSelect: true,
collapse: true,
selected: [defaultSelected]    //change here...   
});
$("#hfDepotMapping").val(defaultSelected);      //add this...
}
//...
});
}
function FillSalaryDepotsMappings(defaultSelected) {
$.ajax({
type: "GET",
url: "/User/GetDepotDepartemntsForMap",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#ddlSalaryMapping').comboTree({
source: data,
isMultiple: true,
cascadeSelect: true,
collapse: true,
selected: [defaultSelected]      //change here...
});
$("#hfSalaryMapping").val(defaultSelected);  //add this...
}
//......
});
}
</script>
}

控制器：

[HttpGet]
public async Task<IActionResult> Index()
{
ViewBag.DepotDepartmentMapping = 1;
ViewBag.DepotLocationMappingForSalary =10;   
return View();
}
public string GetDepotDepartemntsForMap()
{
var SampleJSONData = System.IO.File.ReadAllText("test.json");
return SampleJSONData;
}

test.json:

[
{
"id": 1,
"title": "Four Wheels",
"subs": [
{
"id": 10,
"title": "Car"
}, {
"id": 11,
"title": "Truck"
}, {
"id": 12,
"title": "Transporter"
}, {
"id": 13,
"title": "Dozer"
}
]
}, {
"id": 2,
"title": "Two Wheels",
"subs": [
{
"id": 20,
"title": "Cycle"
}, {
"id": 21,
"title": "Motorbike"
}, {
"id": 22,
"title": "Scooter"
}
]
}, {
"id": 3,
"title": "Van"
}, {
"id": 4,
"title": "Bus"
}
]