javascript 使用 JQuery 从输入剑道 ComboBox 中获取值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22780861/
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
get the value from input kendo ComboBox using JQuery
提问by Toxic
I am using kendo comboBox in my app and I need to get value and ID of record out of ComboBox, outside the ComboBox actual function.... I am using comboBox dropdown in table against each record so I can't relay on css ID to get comboBox value... I have managed to reach to input comboBox of selected record and I did this test by apply background color to it. I have tested .val() which works fine for just input textbox but its not happening for kendo ComboBox...
我在我的应用程序中使用 kendo 组合框，我需要从组合框中获取记录的值和 ID，在组合框实际功能之外......获得组合框值...我设法达到了所选记录的输入组合框，并且我通过对其应用背景颜色来进行此测试。我已经测试了 .val() ，它只适用于输入文本框，但它不适用于 kendo ComboBox ...
Many Thanks
非常感谢
input
输入
<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>
ComboBox function
组合框功能
$("._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());
}
});
jQuery function
jQuery 函数
$("#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);
.....
回答by Vojtiik
Have a look at the Kendo demo, it actually shows precisely what are you interested in
看看剑道演示，它实际上准确地显示了你对什么感兴趣
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());
});
The value retrieval in your example is not working because you are calling method at the html element not a Kendo control. Consider this example:
您示例中的值检索不起作用，因为您在 html 元素而不是 Kendo 控件上调用方法。考虑这个例子：
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.value("Oranges");
Therefore in your case do following :
因此，在您的情况下，请执行以下操作：
$(this).closest('table').find("._MarkSchemeId_Input").data("kendoComboBox").text()
回答by George K
By design, the ComboBox widget copies all styles and CSS classes from the original element to the visible input. This is documented here. If you examine the rendered HTML it will look like this:
按照设计，ComboBox 小部件将所有样式和 CSS 类从原始元素复制到可见输入。这在此处记录。如果您检查呈现的 HTML，它将如下所示：
- original element + initialization code
- 原始元素+初始化代码
<input class="custom-class" />
<script>
$(function() {
$(".custom-class").kendoComboBox();
});
</script>
- results in this HTML
- 结果在这个 HTML
<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>
As you can see the custom-classis copied to wrapper element and to the visible input. Because of this you will need to use a more specific selector to find only the original input elements:
如您所见，自定义类被复制到包装元素和可见输入。因此，您将需要使用更具体的选择器来仅查找原始输入元素：
$(".custom-class[data-role=combobox]");
Note that this will return a list of input elements. If you need to get selected data items, you will need to loop them and get the combobox instance for each of the input element.
请注意，这将返回一个输入元素列表。如果需要获取选定的数据项，则需要循环它们并获取每个输入元素的组合框实例。
HereI prepared a simple jsBin demo, which shows how to accomplish this.
这里我准备了一个简单的 jsBin 演示，它展示了如何实现这一点。
回答by Toxic
I have managed to resolve the issue as following
我设法解决了以下问题
<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);
