0
以下の機能を持つ剣道UIドロップダウンリストが必要です。剣道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>
フィルタリングされた検索結果を選択するすべてのオプションを選択すると、2番目の要件をどのように達成できますか。私はkend ui Multi Selectオプションそのものを探しています。私はjQueryマルチ選択ドロップダウンには興味がありません。ヘルプを楽しみにしています。前もって感謝します。
解決に感謝します。これは、私が期待していたもののいくつかですが、私にとっては、すべてを選択するチェックボックスはドループダウンリスト内にあるはずです。質問に画像を追加しました。とにかくありがとう。 – Nitheesh
あなたが投稿した回答のフォームを作成しました。 – Nitheesh