使用 JQuery 从输入 kendo ComboBox 中获取值

Question

我在我的应用程序中使用剑道组合框，我需要在 ComboBox 实际功能之外从 ComboBox 中获取记录的值和 ID....在 css ID 上获取组合框值...我已经设法输入所选记录的组合框，我通过对其应用背景颜色进行了此测试。我已经测试了 .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());                      
        }
    });

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);
 .....

Answer 1

看看剑道demo，它实际上准确地显示了你对什么感兴趣

 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 控件处调用方法。考虑一下example：

$("#combobox").kendoComboBox({
  dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.value("Oranges");

因此，在您的情况下，请执行以下操作：

$(this).closest('table').find("._MarkSchemeId_Input").data("kendoComboBox").text()

Answer 2

根据设计，ComboBox 小部件将所有样式和 CSS 类从原始元素复制到可见输入。这记录在here。如果您检查呈现的 HTML，它将如下所示：

• 原始元素+初始化代码

$（函数（）{ $(".custom-class").kendoComboBox(); }); 脚本>

• 此 HTML 的结果

选择

如您所见，custom-class 被复制到包装器元素和可见输入中。因此，您将需要使用更具体的选择器来仅查找原始输入元素：

$(".custom-class[data-role=combobox]");

请注意，这将返回一个输入元素列表。如果需要获取选定的数据项，则需要循环它们并获取每个输入元素的组合框实例。

Here我准备了一个简单的 jsBin 演示，演示了如何实现。

Answer 3

我已经设法解决了以下问题

<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);