如何使用 javascript 动态添加 Telerik/Kendo DropdownList？答案

【问题标题】：How to add a Telerik/Kendo DropdownList Dynamiclly with javascript?如何使用 javascript 动态添加 Telerik/Kendo DropdownList？
【发布时间】：2015-02-27 04:59:14
【问题描述】：

我最近的任务是用 Telerik/Kendo UI 组件替换应用程序上的所有控件。在大多数情况下，这很容易，但我被一个问题难住了：

在现有的预 Kendo 应用程序中，有一个表单具有用于类别的级联下拉列表，但由于我们的管理程序允许管理员创建无限数量的子类别，因此可以有任意数量的下拉列表 - 所以每次选择一个类别，如果找到后续子类别（通过对服务器的 ajax 调用），则使用 javascript 通过将字符串连接在一起并将其附加到 dom 创建一个新的选择元素，以便用户可以继续选择其他子类别。

在您知道下拉列表数量的情况下，与 Kendo 级联似乎很容易，但我找不到任何有关如何在 javascript 中创建新的 Kendo Dropdownlist、设置值等的文档，然后将其添加到页面。这可能吗？

我正在摆弄类似下面的东西，但还没有成功...这可能吗，无论是在客户端还是通过某种从服务器返回下拉列表的 ajax 调用？

<script>
    $(document).ready(function () {
        $('#test-button').click(function () {
            var dropdown = new kendo.ui.DropDownList();
            //Do some configuring and set data...then add to page
            $('#new-dropdown').append(dropdown);
        })
    }
</script>

<button id="test-button">Test</button>
<div id="new-dropdown">

</div>

【问题讨论】：

标签： jquery asp.net-mvc kendo-ui kendo-asp.net-mvc telerik-mvc

【解决方案1】：

我一发布这个问题就找到了解决方案。这是我想出的，以防有人需要我需要的相同帮助：

<script>
    $(document).ready(function () {
        $('#test-button').click(function () {
            $('#new-dropdown').append('<select id="dropdown"></select>');
            var dropdown = $("#dropdown").kendoDropDownList({
                name: "name"
                //etc...
            });
        })
    }
</script>

<button id="test-button">Test</button>
<div id="new-dropdown">

</div>

【讨论】：