0

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

'get(...).options' 为空或不是对象

在线的：

$("#courseID").get(0).options.length = 0;

这是我的 Telerik 下拉列表：

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

这是我尝试使用 jquery 填充它的方式：

我在“StudentID”focusout 事件上调用 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")
    }
});
}

任何帮助表示赞赏

4

1 回答 1

3

更新 8/24

对困惑感到抱歉。正如我所说 - 我已经创建了一个 Visual C# - Web 项目 - 类型为“RadControls for Web Application”。这是一个屏幕截图：

Rad 控制 Web 应用程序

修改后的 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 扩展控件具有丰富的客户端 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" />

所以我有一个用名称和 id 属性定义的下拉列表。我有一个按钮，用于模拟您的失焦场景。想法是单击按钮时，我们将触发 AJAX 请求并获取 JSON 有效负载。我们将使用 JSON 有效负载来绑定下拉列表选项。

Java脚本：

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 方法将第一个选项设置为下拉列表中的选择项。

此场景在我们的在线演示应用程序页面中展示，网址为： http: //demos.telerik.com/aspnet-mvc/combobox/clientsidebinding

希望这能回答你的问题。

Lohith (Tech Evangelist, Telerik India)

于 2012-08-22T19:11:12.977 回答