使用jquery填充telerik下拉列表 [英] populate telerik dropdown list using jquery
问题描述
我在使用jquery填充telerik下拉列表时遇到问题.我收到以下错误:
I am having issues with populating a telerik dropdown list using jquery. I get the following Error:
'get(...).options'为null或不是对象
'get(...).options' is null or not an object
在线:
$(#courseID").get(0).options.length = 0;
$("#courseID").get(0).options.length = 0;
这是我的telerik下拉列表:
Here is my telerik dropdown list:
<%= Html.Telerik().DropDownList()
.Name("courseID")
.HtmlAttributes(new{ @id="courseID"})
%>
这是我尝试使用jquery填充它的方式:
Here is how I am trying to populate it using jquery:
我在"StudentID"焦点事件中调用populateDDL函数，这是该函数.
I call the populateDDL function on "StudentID" focusout event, here is the function.
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")
}
});
}
感谢您的帮助
推荐答案
更新8/24
很抱歉造成混乱.正如我所说的-我已经创建了一个Visual C#-Web项目-类型为"RadControls for Web Application".这是屏幕截图:
Sorry for the confusion. As i said - i had created a Visual C# - Web Project - of type "RadControls for Web Application". Here is a screenshot:
修改后的Site.Master代码如下所示:
The modified Site.Master code looks like below:
<%@ 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引用.那是我唯一的改变.其余代码保持不变.
Notice that i added a JQuery reference through a script tag. That was the only change i did. Rest of the code stays as is.
我已将我的代码压缩并上传到以下位置:
I have zipped up my code and uploaded to the following location :
您可以下载它们并查看代码.您需要从系统中设置对Telerik.Web.Mvc.dll的引用
You can download the same and have a look at the code. You will need to set reference to Telerik.Web.Mvc.dll from you system
希望这可以解决您的问题
Hope this solves your problem
Telerik MVC扩展控件具有丰富的客户端API.因此，如果您使用了DropDownList-您将无法使用jquery语法$(#id")获得控件.相反，您将需要使用以下内容:
Telerik MVC Extension controls have a rich client side API. So if you have used a DropDownList - you will not be able to get the control by using the jquery syntax $("#id"). Instead you will need to use the following:
var dropDownList = $("#DropDownList").data("tDropDownList");
这是我能够针对您的这种情况编写的代码段:
Here is code snippet i was able to spin up for this scenario of yours:
查看:
<%= Html.Telerik().DropDownList()
.Name("courseID")
.HtmlAttributes(new {@id="courseID" })
%>
<input type="button" id="btnPopulateDropdown" onclick="onDropDownListDataBinding()" value="Populate Dropdown" />
因此，我有一个定义了名称和ID属性的下拉列表.我有一个按钮，用于模仿您的焦点不集中的情况.想法是，单击该按钮，我们将触发AJAX请求并获取JSON有效负载.我们将使用JSON有效负载来绑定下拉列表选项.
So i have a drop down list defined with a name and id attributes. I have a button which is used to mimic your out of focus scenario. Idea is that on click of the button we will fire a AJAX request and get a JSON payload. we will use the JSON payload to bind the drop down list options.
JavaAcript:
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方法将第一个选项设置为下拉列表中的选择项.
As you can see the first line in the function is about getting a reference to the drop down list. Then assume that you made a AJAX request and you have got the JSON payload. You use the databind method to bind the JSON data. Then i use the select method to set the first option as the selection item in the drop down list.
此方案在我们的在线演示应用程序页面的以下URL上进行了展示: http://demos.telerik.com/aspnet-mvc/combobox/clientsidebinding
This scenario is showcased in our online demo application page at the following URL: http://demos.telerik.com/aspnet-mvc/combobox/clientsidebinding
希望这能回答您的问题.
Hope this answers your question.
Lohith(印度Telerik的技术传播者)
Lohith (Tech Evangelist, Telerik India)
这篇关于使用jquery填充telerik下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
