[英]get the value from input kendo ComboBox using JQuery
我在我的应用程序中使用kendo comboBox,我需要从ComboBox的ComboBox实际功能之外获取记录的值和ID。...我在针对每个记录的表中使用comboBox下拉列表,所以我无法在CSS ID上进行中继为了获得comboBox的值...我设法达到了输入所选记录的comboBox的目的,并且我通过对其应用背景色来进行了此测试。 我已经测试了.val(),它只对输入文本框有效,但对于kendo ComboBox却没有发生...
非常感谢
<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkSchemeId_Input" }) </td>
$("._MarkSchemeId_Input").kendoComboBox({
minLength: 1,
filter: 'contains',
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
serverFiltering: false,
transport: {
read: "/Qualification/GetAllMarkScheme_JSON"
},
},
change: function () {
alert("value " + this.value() + " " + this.text());
}
});
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
$(this).closest('table').find("._MarkSchemeId_Input").css("background", "red");
var a1 = $(this).closest('table').find("._MarkSchemeId_Input").text(); // doesn't work
alert("a1 " + a1);
.....
看一下Kendo 演示 ,它实际上准确地显示了您对什么感兴趣
var fabric = $("#fabric").data("kendoComboBox");
var select = $("#size").data("kendoComboBox");
$("#get").click(function() {
alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
});
您的示例中的值检索不起作用,因为您正在html元素而不是Kendo控件上调用方法。 考虑这个例子 :
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.value("Oranges");
因此,在您的情况下,请执行以下操作:
$(this).closest('table').find("._MarkSchemeId_Input").data("kendoComboBox").text()
通过设计,ComboBox小部件将所有样式和CSS类从原始元素复制到可见输入。 这在此处记录 。 如果检查渲染的HTML,它将如下所示:
<input class="custom-class" /> <script> $(function() { $(".custom-class").kendoComboBox(); }); </script>
<span class="k-widget k-combobox k-header custom-class"> <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"> <input class="k-input custom-class" type="text" autocomplete="off" style="width: 100%;"> <span tabindex="-1" unselectable="on" class="k-select"> <span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1"> select </span> </span> </span> <input class="custom-class" data-role="combobox" style="display: none;"> </span>
如您所见, 自定义类被复制到包装器元素和可见输入。 因此,您将需要使用更具体的选择器来仅查找原始输入元素:
$(".custom-class[data-role=combobox]");
请注意,这将返回输入元素的列表。 如果需要获取选定的数据项,则需要循环它们并获取每个输入元素的combobox实例。
在这里,我准备了一个简单的jsBin演示,展示了如何完成此操作。
我设法解决了以下问题
<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkScheme_Input" }) </td>
//--get all the MarkScheme from database and put in drop-down
$("._MarkScheme_Input").kendoComboBox({
minLength: 1,
filter: 'contains',
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
serverFiltering: false,
transport: {
read: "/Qualification/GetAllMarkScheme_JSON"
},
},
change: function () {
// alert("value " + this.value() + " " + this.text()); //if it need to test selected record data...
}
});
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
$(this).closest('table').find("._MarkScheme_Input").css("background", "red");
//read all the input 'comboxBox' in loop...
//var _comboBoxInput = $(this).closest('table').find("._MarkScheme_Input").filter("[data-role=combobox]");
//_comboBoxInput.each(function (idx, input) {
// alert("idx " + idx + " \n input " + input);
// var combobox = $(input).data("kendoComboBox");
// alert("ID>>> : " + combobox.value() + ", Text: >>> " + combobox.text());
//});
//-------------------------
var input = $(this).closest('table').find("._MarkScheme_Input");
var comboboxInput = input.filter("[data-role=combobox]");
var combobox = comboboxInput.data("kendoComboBox");
var selectedText = combobox.text();
var selectedValue = combobox.value();
var dataItem = combobox.dataItem();
alert("ID>>> : " + selectedValue + ", Text: >>> " + selectedText);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.