Question

我有一种情况，我有两个多选Kendo下拉菜单，在选择第一个多选下拉列表时，我想填充另一个多选下拉列表。

第一个MultiSelect Kendo 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" })
 )

第二次MultiSelect Kendo 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，但由于 DataSource 没有与第二个下拉列表绑定，因此无效。

约束：

我一开始并不想在两个下拉列表中加载数据。
第二个下拉列表的值取决于第一个下拉列表，意味着第一个dorpdown中选择的所有值都将通过MVC Controller发送到数据库并从那里获取数据。

我想做什么：

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

Answer 1

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

首先，我在onFirstDropDownChange附加了一个JavaScript函数FirstDropDown。
然后在onFirstDropDownChange js函数中，我在第一个下拉列表中获取所有选定的值并进行同步AJAX调用并在第二个下拉列表中绑定数据，下面是相同的代码。

var multiselect = $（“＃FirstDropDown”）。data（“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 }));

如果您正在寻找类似的解决方案，希望这会对您有所帮助。

Cascade Multi Select Kendo Dropdown可以更改另一个Multi Select Kendo Dropdown

1 个答案: