jquery - 需要在 jQuery 的帮助下在 kendo ui 框架中创建一个下拉列表。任何人都可以为此提供一个小代码

Question

任何人都可以为这种下拉列表提供一些指导吗？

Answer 1

请尝试使用以下代码片段。

<div>
  <input id="fabric" placeholder="Select fabric...">


  <input id="hf_fabric" type="hidden">
  Selected values : <span id="spanfabric"></span>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#fabric").kendoDropDownList({
            name: "fabric",
            dataTextField: "DataText",
            dataValueField: "DataValue",
            dataSource: [
                            { DataText: "Select All", DataValue: "0" },
                            { DataText: "Cotton", DataValue: "1" },
                            { DataText: "Polyester", DataValue: "2" },
                            { DataText: "Cotton/Polyester", DataValue: "3" },
                            { DataText: "Rib Knit", DataValue: "4" }
            ],
            filter: "contains",
            suggest: true,
            template: "<input type='checkbox' id='chk_fabric_#=data.DataValue #' onclick='UpdateIdinHF(this);' value='#=data.DataValue #' name='fabric' />" + " " + "${ data.DataText }",
            close: onClose,
            change: onChange
        });

    });

    var IsItemChecked = false;
    function UpdateIdinHF(obj) {
        var id = $(obj).attr('id');
        var name = $(obj).attr('name');
        var value = parseInt($(obj).attr('value'));
        var IsChecked = $(obj).is(':checked');
        var hf = $("#hf_" + name).get(0);

        if (value != 0) {
            UpdateIdInHiddenField(hf, value, IsChecked);

            var totalchk = $('input[id*="chk_' + name + '"]').not("#chk_" + name + "_0").length;
            var checkedchk = $('input[id*="chk_' + name + '"]:checked').not("#chk_" + name + "_0").length;

            if (totalchk == checkedchk) {
                $("#chk_" + name + "_0").prop("checked", true);
            }
            else {
                $("#chk_" + name + "_0").prop("checked", false);
            }
        }
        else {
            $('input[id*="chk_' + name + '"]').each(function () {
                if (parseInt($(this).val()) != 0) {
                    if (IsChecked == true) {
                        $(this).prop("checked", true);
                        UpdateIdInHiddenField(hf, $(this).val(), IsChecked);
                    }
                    else {
                        $(this).prop("checked", false);
                        UpdateIdInHiddenField(hf, $(this).val(), IsChecked);
                    }
                }
            });
        }
        IsItemChecked = true;
    }
    function onClose(e) {
        if (IsItemChecked == true) {
            IsItemChecked = false;
            e.preventDefault();
        }
        else {
            ShowSelectedItem();
        }
    }
    function ShowSelectedItem() {
        $("#spanfabric").html($("#hf_fabric").val());
    }

    function UpdateIdInHiddenField(hf, id, IsAdd) {
        if (hf.value == "") {
            hf.value = ",";
        }

        if (IsAdd == true) {
            if (hf.value.indexOf("," + id + ",") == -1) {
                hf.value = hf.value + id + ",";
            }
        }
        else if (IsAdd == false) {
            if (hf.value.indexOf("," + id + ",") >= 0) {
                hf.value = hf.value.replace("," + id + ",", ",");
            }
        }
    }
    function onChange(e) {
        e.sender.value(null);
    }
</script>

如果您的页面中有多个下拉列表，请查看以下链接。

Kendo UI 中的多选组合框