Kendo UI 多选下拉菜单带有过滤器并选择所有选项
Nit*_*esh 1 javascript jquery multi-select kendo-ui
我需要一个具有以下功能的 kendo ui 下拉列表。
- 带有选择复选框的多选下拉菜单可一次检查多个选项。
- 选择所有复选框作为标题模板，当我单击它时，会选择该选项的所有过滤搜索结果。
我查阅了很多参考资料，并从 telrik 找到了一个接近的解决方案。至此我的第一个要求就满足了。我已在此处附加了代码片段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" role="application">
<div class="demo-section k-header">
<h2>Invite Attendees</h2>
<label for="required">Required</label>
<select id="required" multiple="multiple" data-placeholder="Select attendees...">
<option selected>Steven White</option>
<option>Nancy King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option selected>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option selected>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
</div>
<style>
.k-list .k-item {}
.k-item input {}
</style>
<script>
$(document).ready(function () {
var checkInputs = function (elements) {
elements.each(function () {
var element = $(this);
var input = element.children("input");
input.prop("checked", element.hasClass("k-state-selected"));
});
};
// create MultiSelect from select HTML element
var required = $("#required").kendoMultiSelect({
itemTemplate: "<input type='checkbox'/> #:data.text#",
autoClose: false,
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
}).data("kendoMultiSelect");
});
</script>
</div>
</body>
</html>
我怎样才能实现我的第二个要求，选择选择我过滤的搜索结果的所有选项。我正在寻找 kend ui 多选选项本身。我对 jQuery 多选下拉菜单不感兴趣。期待帮助。提前致谢。
感谢 Vispan 的解决方案，做得很好。我已经根据您发布的代码开发了解决方案。我在这里分享这段代码，因为这可能对你们中的一些人非常有帮助。
\n\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset="utf-8" />\n <title>Kendo UI Snippet</title>\n\n <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />\n <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />\n <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />\n <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />\n\n <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>\n <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>\n <script>\n $(document).ready(function () {\n\n\n\n var data = [{"name":"Afghanistan"},{"name":"\xc3\x85land Islands"},{"name":"Albania"},{"name":"Algeria"},{"name":"American Samoa"},{"name":"Andorra"},{"name":"Angola"},{"name":"Anguilla"},{"name":"Antarctica"},{"name":"Antigua and Barbuda"},{"name":"Argentina"},{"name":"Armenia"},{"name":"Aruba"},{"name":"Australia"},{"name":"Austria"},{"name":"Azerbaijan"},{"name":"Bahamas"},{"name":"Bahrain"},{"name":"Bangladesh"},{"name":"Barbados"},{"name":"Belarus"},{"name":"Belgium"},{"name":"Belize"},{"name":"Benin"},{"name":"Bermuda"},{"name":"Bhutan"},{"name":"Bolivia"},{"name":"Bonaire"},{"name":"Bosnia and Herzegovina"},{"name":"Botswana"},{"name":"Bouvet Island"},{"name":"Brazil"},{"name":"British Indian Ocean Territory"},{"name":"British Virgin Islands"},{"name":"Brunei"},{"name":"Bulgaria"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cambodia"},{"name":"Cameroon"},{"name":"Canada"},{"name":"Cape Verde"},{"name":"Cayman Islands"},{"name":"Central African Republic"},{"name":"Chad"},{"name":"Chile"},{"name":"China"},{"name":"Christmas Island"},{"name":"Cocos (Keeling) Islands"},{"name":"Colombia"},{"name":"Comoros"},{"name":"Republic of the Congo"},{"name":"Democratic Republic of the Congo"},{"name":"Cook Islands"},{"name":"Costa Rica"},{"name":"C\xc3\xb4te d\'Ivoire"},{"name":"Croatia"},{"name":"Cuba"},{"name":"Cura\xc3\xa7ao"},{"name":"Cyprus"},{"name":"Czech Republic"},{"name":"Denmark"},{"name":"Djibouti"},{"name":"Dominica"},{"name":"Dominican Republic"},{"name":"Ecuador"},{"name":"Egypt"},{"name":"El Salvador"},{"name":"Equatorial Guinea"},{"name":"Eritrea"},{"name":"Estonia"},{"name":"Ethiopia"},{"name":"Falkland Islands"},{"name":"Faroe Islands"},{"name":"Fiji"},{"name":"Finland"},{"name":"France"},{"name":"French Guiana"},{"name":"French Polynesia"},{"name":"French Southern and Antarctic Lands"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Georgia"},{"name":"Germany"},{"name":"Mali"},{"name":"Malta"},{"name":"Marshall Islands"},{"name":"Martinique"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Mayotte"},{"name":"Mexico"},{"name":"Micronesia"},{"name":"Moldova"},{"name":"Monaco"},{"name":"Mongolia"},{"name":"Montenegro"},{"name":"Montserrat"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Myanmar"},{"name":"Namibia"},{"name":"Nauru"},{"name":"Nepal"},{"name":"Netherlands"},{"name":"New Caledonia"},{"name":"New Zealand"},{"name":"Nicaragua"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Niue"},{"name":"Norfolk Island"},{"name":"North Korea"},{"name":"Northern Mariana Islands"},{"name":"Norway"},{"name":"Oman"},{"name":"Pakistan"},{"name":"Palau"},{"name":"Palestine"},{"name":"Panama"},{"name":"Papua New Guinea"},{"name":"Paraguay"},{"name":"Peru"},{"name":"Philippines"},{"name":"Pitcairn Islands"},{"name":"Poland"},{"name":"Portugal"},{"name":"Turks and Caicos Islands"},{"name":"Tuvalu"},{"name":"Uganda"},{"name":"Ukraine"},{"name":"United Arab Emirates"},{"name":"United Kingdom"},{"name":"United States"},{"name":"United States Minor Outlying Islands"},{"name":"United States Virgin Islands"},{"name":"Uruguay"},{"name":"Uzbekistan"},{"name":"Vanuatu"},{"name":"Venezuela"},{"name":"Vietnam"},{"name":"Wallis and Futuna"},{"name":"Western Sahara"},{"name":"Yemen"},{"name":"Zambia"},{"name":"Zimbabwe"}];\n\n var ds = new kendo.data.DataSource({\n data: data\n });\n\n var checkInputs = function (elements) {\n elements.each(function () {\n var element = $(this);\n var input = element.children("input");\n\n input.prop("checked", element.hasClass("k-state-selected"));\n });\n };\n\n $("#items").kendoMultiSelect({\n dataValueField: "name",\n dataTextField: "name",\n dataSource: ds,\n dataBound: function () {\n var items = this.ul.find("li");\n setTimeout(function () {\n checkInputs(items);\n });\n },\n itemTemplate: "<input type=\'checkbox\'/> #:data.name#",\n headerTemplate: "<div><input type=\'checkbox\' id=\'Header\'><label> Select All</label></div>",\n autoClose: false,\n change: function () {\n var items = this.ul.find("li");\n checkInputs(items);\n }\n });\n\n $(\'#Header\').click(function () {\n if ($(this).is(\':checked\')) {\n $(\'#items_listbox\').find("li").each(function () {\n $(this).trigger("click");\n //$(this).find("input").prop("checked",true);\n });\n } else {\n $(\'#items_listbox\').find("li").each(function () {\n $(this).trigger("click");\n //$(this).find("input").prop("checked", false);\n });\n }\n });\n\n $(\'#containerDiv\').keydown(function (e) {\n $("#Header").attr("checked", false);\n });\n\n });\n </script>\n</head>\n\n<body>\n\n <div id="example" role="application">\n Type a country name:\n <div id="containerDiv"><div id="items"></div></div>\n </div>\n</body>\n\n</html>\n| 归档时间： |
|
| 查看次数： |
11646 次 |
| 最近记录： |