jQuery 如何从剑道网格中的剑道下拉列表中获取选定的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17669392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the selected value from a kendo dropdownlist within a kendo grid?
提问by Badhon Jain
I have a kendo grid with batch editing enabled which contains a dropdownlist. I can read the other field of the grid while trying to save batch information but getting hard time to read the selected value of the dropdownlist. Here is my code for the grid:
我有一个启用了批量编辑的剑道网格，其中包含一个下拉列表。我可以在尝试保存批处理信息时读取网格的另一个字段，但很难读取下拉列表的选定值。这是我的网格代码：
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: datasource,
navigatable: true,
pageable: true,
height: 430,
sortable: true,
editable: true,
selectable: "multiple row",
groupable: true,
navigatable: true,
filterable: true,
toolbar: ["create", "cancel"],
columns: [
{ field: "EmployeeID", title: "Employee ID", width: 110 },
{ field: "EmployeeName", title: "Employee Name", width: 110 },
{ field: "Category", title: "Category", editor: categoryDropDownEditor, width: 50 },
{ command: "destroy", title: "Delete", width: 90 }
],
});
});
Here is the code for the dropdownlist:
这是下拉列表的代码：
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '" id="test"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "EmployeeName",
dataValueField: "EmployeeID",
optionLabel: "Select",
autoBind: false,
//index: 0,
//change: onChange,
dataSource: new kendo.data.DataSource( {
transport: {
read: {
url: "/Home/Category",
type: "GET"
},
schema:{
model: {
ID: "CategoryID",
Value: "CategoryName"
}
}
}
})
});
}
Here is the code where I'm trying to save the values:
这是我尝试保存值的代码：
function Save() {
var EmployeeInfo = { "EmployeeID": "", "EmployeeName": "", "CategoryID": "" };
var CompanyInfo = { "CompanyID": "", "CompanyName": "", "Employee": [] };
CompanyInfo.CompanyID = $("#CompanyID").val();
CompanyInfo.CompanyName = $("#CompanyName").val();
var drop = $("#test").data("kendoDropDownList");
var GridData = $("#grid").data("kendoGrid");
var data = GridData.dataSource.data();
for (var i = 0; i < data.length; i++) {
var item = data[i]; //Got the dropdown selected value & text here, just need to assign that value to the CategoryID attribute!
EmployeeInfo.EmployeeID = item.EmployeeID;
EmployeeInfo.EmployeeName = item.EmployeeName;
EmployeeInfo.CategoryID = item.CategoryID[0]; //Problem is here in assinging data!!
CompanyInfo.Employee.push(EmployeeInfo);
EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };
}
$.ajax({
url: '/Home/Create',
data: JSON.stringify(CompanyInfo),
type: 'POST',
contentType: 'application/json;',
dataType: 'json'
});
};
How can I get the selected value of the dropdownlist? Another problem is that, after selecting an item in the dropdown, when I'm moving to another line of grid, the selected text getting changed in the dropdown, showing [object, object] instead. Please help. Thanks.
如何获取下拉列表的选定值？另一个问题是，在下拉列表中选择一个项目后，当我移动到另一行网格时，下拉列表中选定的文本会发生变化，而是显示 [object, object]。请帮忙。谢谢。
回答by OnaBai
The problem is that you are trying to access the DropDownList from Savefunction when very likely that inputno longer exist. You should simply access that field the same way you access the others. An editorfunction updates the fields because it is an observableobject.
问题是您正在尝试从Save函数访问 DropDownList，而该函数很可能input不再存在。您应该像访问其他字段一样简单地访问该字段。一个editor功能更新的领域，因为它是一个可观察的对象。
Try doing:
尝试做：
for (var i = 0; i < data.length; i++) {
var item = data[i];
EmployeeInfo.EmployeeID = item.EmployeeID;
EmployeeInfo.EmployeeName = item.EmployeeName;
EmployeeInfo.CategoryID = item.Category,
CompanyInfo.Employee.push(EmployeeInfo);
EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };
}
By the way, I'm not sure about the processing that you want to do before sending the data to the server but typically people use create, updateand destroyin DataSource.transport. It uses to simplify your development and saves you from doing ajaxcalls.
顺便说一句，我不知道你想要的数据发送到服务器之前做的，但一般人使用的处理create，update并destroy在DataSource.transport。它用于简化您的开发并节省您的ajax通话时间。
回答by dush88c
when select a value from a dropdown list, and in the selec event , we can get the selected value as following ,
当从下拉列表中选择一个值时，在 selec 事件中，我们可以获得如下选定的值，
@(Html.Kendo().DropDownList()
.Name("booksDropDown")
.HtmlAttributes(new { style = "width:37%" })
.DataTextField("BookName")
.DataValueField("BookId")
.Events(x => x.Select("onSelectBookValue"))
.DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
.OptionLabel("Select"))
javascript function like following ,
javascript函数如下，
function onSelectBookValue(e) {
var dataItem = this.dataItem(e.item.index());
var bookId = dataItem.BookId;
//other user code
}
I believe this will help someone
我相信这会帮助某人
Thanks
谢谢
回答by Reddy
You can get the selected value by passing tag name using jquery. try this
您可以通过使用 jquery 传递标签名称来获取选定的值。尝试这个
$('#grid select option:selected').val(); // for val
$('#grid select option:selected').text(); // for text
