具有一个数据源的多个下拉列表 Kendo
Multiple Dropdown Lists with one DataSource Kendo
我有一个页面为用户提供了 5 个带有安全问题的下拉列表。它们是通过本地数据源对象设置的,基本上是一个对象中的 10 个问题。我想将所有 5 个下拉列表绑定到同一个数据源,并且一个问题是 selected,将其从数据源中删除,因此您不能 select 它用于下一个问题。到目前为止,这是我的代码:
var questions =
[{
value: "Your first pet\'s name?"
},
{
value: "Your favorite teacher?"
},
{
value: "The city you were born in?"
},
{
value: "Your mother\'s maiden name?"
},
{
value: "The high school you attended?"
},
{
value: "First name of the first person you kissed?"
},
{
value: "What did you want to be when you grow up?"
},
{
value: "The brand of your first car?"
},
{
value: "Your favorite city?"
}];
var localDataSource = new kendo.data.DataSource({
data: questions
});
var dropdown = $('.dropdownlist');
dropdown.kendoDropDownList({
dataTextField: "value",
dataValueField: "value",
dataSource: localDataSource
});
我的 HTML 渲染字段:
<input class="dropdownlist w250px" name="questions[1][question]" />
每题5次。
要实现所需的行为,您可以使用相同的数据,但单独的数据源实例,否则您将无法对每个 DropDownList 进行不同的过滤。
这是一个示例,您可以将其用作起点并进一步自定义它以匹配您的场景。
使用的 API 包括:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Related Kendo UI DropDownLists</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<p><input id="ddl1" name="ddl1" class="related-dropdown" /></p>
<p><input id="ddl2" name="ddl2" class="related-dropdown" /></p>
<p><input id="ddl3" name="ddl3" class="related-dropdown" /></p>
<script>
var data = [
{ id: 1, text: "question 1" },
{ id: 2, text: "question 2" },
{ id: 3, text: "question 3" }
];
for (var j = 1; j <= data.length; j++) {
$("#ddl" + j).kendoDropDownList({
dataSource: {
data: data,
filter: {}
},
dataTextField: "text",
dataValueField: "id",
optionLabel: "Select a question",
change: onChange
});
}
function onChange(e) {
if (e.sender.value()) {
var otherDropDowns = $("input.related-dropdown").not(e.sender.element);
for (var j = 0; j < otherDropDowns.length; j++) {
var ddl = $(otherDropDowns[j]).data("kendoDropDownList");
var newCondition = { field: "id", operator: "neq", value: e.sender.value() };
var currentFilter = ddl.dataSource.filter();
if (currentFilter && currentFilter.filters) {
currentFilter.filters.push(newCondition);
ddl.dataSource.filter(currentFilter);
} else {
ddl.dataSource.filter(newCondition);
}
}
} else {
// clear the freed question from the DropDownLists' filter criteria
}
}
</script>
</body>
</html>
我有一个页面为用户提供了 5 个带有安全问题的下拉列表。它们是通过本地数据源对象设置的,基本上是一个对象中的 10 个问题。我想将所有 5 个下拉列表绑定到同一个数据源,并且一个问题是 selected,将其从数据源中删除,因此您不能 select 它用于下一个问题。到目前为止,这是我的代码:
var questions =
[{
value: "Your first pet\'s name?"
},
{
value: "Your favorite teacher?"
},
{
value: "The city you were born in?"
},
{
value: "Your mother\'s maiden name?"
},
{
value: "The high school you attended?"
},
{
value: "First name of the first person you kissed?"
},
{
value: "What did you want to be when you grow up?"
},
{
value: "The brand of your first car?"
},
{
value: "Your favorite city?"
}];
var localDataSource = new kendo.data.DataSource({
data: questions
});
var dropdown = $('.dropdownlist');
dropdown.kendoDropDownList({
dataTextField: "value",
dataValueField: "value",
dataSource: localDataSource
});
我的 HTML 渲染字段:
<input class="dropdownlist w250px" name="questions[1][question]" />
每题5次。
要实现所需的行为,您可以使用相同的数据,但单独的数据源实例,否则您将无法对每个 DropDownList 进行不同的过滤。
这是一个示例,您可以将其用作起点并进一步自定义它以匹配您的场景。
使用的 API 包括:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Related Kendo UI DropDownLists</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<p><input id="ddl1" name="ddl1" class="related-dropdown" /></p>
<p><input id="ddl2" name="ddl2" class="related-dropdown" /></p>
<p><input id="ddl3" name="ddl3" class="related-dropdown" /></p>
<script>
var data = [
{ id: 1, text: "question 1" },
{ id: 2, text: "question 2" },
{ id: 3, text: "question 3" }
];
for (var j = 1; j <= data.length; j++) {
$("#ddl" + j).kendoDropDownList({
dataSource: {
data: data,
filter: {}
},
dataTextField: "text",
dataValueField: "id",
optionLabel: "Select a question",
change: onChange
});
}
function onChange(e) {
if (e.sender.value()) {
var otherDropDowns = $("input.related-dropdown").not(e.sender.element);
for (var j = 0; j < otherDropDowns.length; j++) {
var ddl = $(otherDropDowns[j]).data("kendoDropDownList");
var newCondition = { field: "id", operator: "neq", value: e.sender.value() };
var currentFilter = ddl.dataSource.filter();
if (currentFilter && currentFilter.filters) {
currentFilter.filters.push(newCondition);
ddl.dataSource.filter(currentFilter);
} else {
ddl.dataSource.filter(newCondition);
}
}
} else {
// clear the freed question from the DropDownLists' filter criteria
}
}
</script>
</body>
</html>