更改另一个多选剑道下拉列表时级联多选剑道下拉列表

Question

我有一种情况，我有两个多选择剑道下拉列表，在第一个多选择下拉列表的选择上，我想填充另一个多选择下拉列表。

第一个多选剑道DD：

@(Html.Kendo().MultiSelect()
   .Name("FirstDropDown").Placeholder("-- Select --")
   .BindTo(new SelectList(Model.BusinessData, "Id", "Name"))
   .Enable(true)
   .AutoBind(false).Events(e => e.Change("onFirstDropDownChange"))
   .HtmlAttributes(new { style = "width: 300px" })
 )

第2次MultiSelect剑道DD：

 @(Html.Kendo().MultiSelect()
   .Name("project")
   .Placeholder("-- Select --")
   .DataTextField("ProjectName")
   .DataValueField("Id")
   .Filter(FilterType.Contains)
   .DataSource(source =>
    {
       source.Read(read =>
       {
          read.Action("GetProjectByBu", "Reports").Data("filterProjects");
       })
    .ServerFiltering(true);
    })
   .Enable(true)
   .AutoBind(false).Events(e => e.Change("onProjectChange"))
   .HtmlAttributes(new { style = "width: 300px" })
 )

JS代码：

function filterProjects() {
    return {
        buID: $("#FirstDropDown").data("kendoMultiSelect").input.val()
    };
}

我所尝试的：

我试图在函数onFirstDropDownChange中调用AJAX，但由于数据源没有绑定到第二个下拉列表，所以这不起作用。

限制条件：

1. 首先，我不想在两个下拉列表中加载数据
2. 第二个下拉列表的值取决于第一个下拉列表，这意味着在第一个下拉列表中选择的所有值将通过MVC控制器发送到数据库并从中获取数据

我想做的是：

当我在第一个多选下拉列表中选择任何值时，我的第二个多选下拉列表将根据在第一个下拉列表中选择的值填充。

Answer 1

我已经使用AJAX调用解决了这个问题，下面是详细的步骤：

1. 首先，我在FirstDropDown上附加了一个JavaScript函数onFirstDropDownChange

var multiselect=$（“#FirstDropDown”）。数据（“kendoMultiSelect”）；

var i; var stringArray = new Array();
    for (i = 0; i < multiselect.dataItems().length; i++)
    {
        stringArray[i] = parseInt(multiselect.dataItems()[i].Value,32);
    }

var postedData = { businessIds: stringArray };
var projectDataSource;

jQuery.ajaxSettings.traditional = true;

//AJAX Call
$.ajax({
    url: '/Reports/GetProjectByBu',
    dataType: 'json',
    data: postedData,
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    async: false,
    traditional: true,
    success: function (data) {
        projectDataSource = data;
    }
});

//Update DataSource of 2nd dropdown
$("#project").data("kendoMultiSelect").setDataSource(new kendo.data.DataSource({ data: projectDataSource }));

希望这将帮助你，如果你正在试图寻找类似的解决方案。