美好的一天,
我有一个包含复选框的kendo下拉列表。下拉列表的数据来自sql数据库中的表。我的问题是,当我在下拉列表中选择数据时,它不会显示在下拉列表中(我希望将其显示为多选功能)。我不确定当我选择它时是否获得所选项目的值。
继承我的代码:
HTML:
<input id="dropDownList" runat="server" />
<script type="text/x-kendo-template" id="CheckboxTemplate"> <li unselectable="on" class="k-item nowrap check-item">
<input type="checkbox" name="#= Day #" value="#= ID #" class="check-input" #= "" ? "checked" : "" # />
<span>#= Day #</span>
<br/>
<span>#= StartTime #-#= EndTime #</span>
</li>
</script>
脚本:
<script type="text/javascript">
$(document).ready(function () {
var clientCusId = $("#clientCusId").val();
var clientId = $("#clientId").val();
var clientCusPosId = $("#clientCusPosId").val();
var data = new kendo.data.DataSource({
transport: {
read: {
url: '/Customer/LoadCustomerPositionShiftList?clientCusId=' + clientCusId + '&clientId=' + clientId + '&clientCusPosId=' + clientCusPosId,
dataType: "json",
type: "POST"
}
}
});
dropdown = $("#dropDownList").kendoDropDownList({
dataTextField: "Day",
dataValueField: "ID",
optionLabel: {
Day: "--Select All--",
StartTime: "",
EndTime:"",
ID: ""
},
template: $("#CheckboxTemplate").html(),
dataSource: data,
select: function (e) {
e.preventDefault();
}
}).data("kendoDropDownList");
//it doesn't go here
dropdown.list.find(".check-input,.check-item").bind("click", function (e) {
var $item = $(this);
var $input;
if ($item.hasClass("check-item")) {
// Text was clicked
$input = $item.children(".check-input");
$input.prop("checked", !$input.is(':checked'));
}
else
// Checkbox was clicked
$input = $item;
var val = $input.val();
//Check all clicked?
if (val == "")
dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
var ddl = $('#dropDownList').data().kendoDropDownList;
var model = ddl.dataItem($input.closest('.k-item').index());
alert(model.text);
updateDropDown()
e.stopImmediatePropagation();
});
updateDropDown()
});
function updateDropDown() {
var items = [];
dropdown.list.find(".check-input").each(function () {
var $input = $(this);
if ($input.val() != "" && $input.is(':checked'))
items.push($input.next().text());
});
// Check the Check All if all the items are checked
$(dropdown.list.find(".check-input")[0]).prop("checked", items.length == dropdown.list.find(".check-input").length - 1);
dropdown.text(items.toString());
}
</script>
希望有人能帮助我。