Question

我遇到使用jquery填充telerik下拉列表的问题。我收到以下错误：

'get（...）。options'为null或不是对象

在线：

$（“＃courseID”）。get（0）.options.length = 0;

这是我的telerik下拉列表：

                <%= Html.Telerik().DropDownList()
                .Name("courseID")
                .HtmlAttributes(new{ @id="courseID"})
                %>

以下是我尝试使用jquery填充它的方法：

我在“StudentID”焦点事件上调用populateDDL函数，这是函数。

function populateDDL() {

var link = '/Student/EnrollerCourse';
$.ajax({
    type: 'POST',
    url: link,
    data: { id: $('#StudentId').val() },
    dataType: 'json',
    success: function (result) {
         $("#courseID").get(0).options.length = 0;
        $("#courseID").get(0).options[0] = new Option("Select", "Select");
        $.each(result.courseID, function (item, value) {
            var courseID = value;
            $("#courseID").get(0).options[$("#courseID").get(0).options.length] = new Option(courseID);
        });          
    },
    error: function (result) {
        alert("Failed")
    }
});
}

感谢任何帮助

Answer 1

更新8/24

很抱歉这个混乱。正如我所说 - 我创建了一个Visual C＃ - Web项目 - 类型为“RadControls for Web Application”。这是一个截图：

Rad Controls Web Application

修改后的Site.Master代码如下所示：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.metro.css").Combined(true).Compress(true)) %></head>

<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <%: Html.Telerik().Menu()
                    .Name("menu")
                    .Items(menu => {
                        menu.Add().Text("Home").Action("Index", "Home");
                        menu.Add().Text("About").Action("About", "Home");
                    })
            %>
        </header>
        <section id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            <footer>
            </footer>
        </section>
    </div>
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %></body>
</html>

请注意，我通过脚本标记添加了一个JQuery引用。那是我做过的唯一改变。其余的代码保持原样。

我已将我的代码压缩并上传到以下位置：

http://sdrv.ms/T1EdBK

您可以下载相同的内容并查看代码。您需要从系统中设置对Telerik.Web.Mvc.dll的引用

希望这能解决您的问题

Telerik MVC Extension控件具有丰富的客户端API。因此，如果您使用了DropDownList - 您将无法通过使用jquery语法$（“＃id”）来获取控件。相反，您需要使用以下内容：

var dropDownList = $("#DropDownList").data("tDropDownList");

以下是我能够针对您的这种情况启动的代码片段：

查看：

 <%= Html.Telerik().DropDownList()
                      .Name("courseID")
                      .HtmlAttributes(new {@id="courseID" })
  %>
  <input type="button" id="btnPopulateDropdown" onclick="onDropDownListDataBinding()" value="Populate Dropdown" />

所以我有一个使用name和id属性定义的下拉列表。我有一个按钮，用于模仿你的失焦场景。想法是，点击按钮，我们将触发AJAX请求并获得JSON有效负载。我们将使用JSON有效负载绑定下拉列表选项。

JavaAcript：

function onDropDownListDataBinding(e) {
                var dropDownList = $('#courseID').data('tDropDownList');

                //Assume that we make a AJAX call and we have the JSON payload with us 

                dropDownList.dataBind([
                                        { Text: "Select", Value: "Select"},
                                        { Text: "Product 1", Value: "1" },
                                        { Text: "Product 2", Value: "2" },
                                        { Text: "Product 3", Value: "3" },
                                        { Text: "Product 4", Value: "4" },
                                        { Text: "Product 5", Value: "5" },
                                        { Text: "Product 6", Value: "6" },
                                        { Text: "Product 7", Value: "7" },
                                        { Text: "Product 8", Value: "8" },
                                        { Text: "Product 9", Value: "9" },
                                        { Text: "Product 10", Value: "10" },
                                        { Text: "Product 11", Value: "11" },
                                        { Text: "Product 12", Value: "12" },
                                        { Text: "Product 13", Value: "13" },
                                        { Text: "Product 14", Value: "14" },
                                        { Text: "Product 15", Value: "15" },
                                        { Text: "Product 16", Value: "16" },
                                        { Text: "Product 17", Value: "17" },
                                        { Text: "Product 18", Value: "18" },
                                        { Text: "Product 19", Value: "19" },
                                        { Text: "Product 20", Value: "20" }
                                    ]);
                                        dropDownList.select(0);
            }

正如您所看到的，该函数的第一行是关于获取对下拉列表的引用。然后假设您发出了一个AJAX请求，并且您已获得JSON有效负载。您使用databind方法绑定JSON数据。然后我使用select方法将第一个选项设置为下拉列表中的选择项。

此方案在我们的在线演示应用程序页面中显示在以下URL： http://demos.telerik.com/aspnet-mvc/combobox/clientsidebinding

希望这能回答你的问题。

Lohith（技术传播者，Telerik India）

使用jquery填充telerik下拉列表

1 个答案: