我有一个页面，为用户提供 5 个带有安全问题的下拉列表。它们是通过本地 DataSource 对象设置的，基本上一个对象中有 10 个问题。我想将所有 5 个下拉列表绑定(bind)到同一个数据源，并选择一个问题，将其从数据源中删除，这样您就无法为接下来的任何问题选择它。这是到目前为止我的代码:
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。
最佳答案
要实现所需的行为，您可以使用相同的数据，但使用单独的 DataSource 实例，否则您将无法针对每个 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>关于javascript - 使用一个数据源 Kendo 的多个下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40868320/