如何在 Kendo UI jQuery 中获取下拉列表的选定文本？答案

【问题标题】：How to get selected text of drop-down list in Kendo UI jQuery?如何在 Kendo UI jQuery 中获取下拉列表的选定文本？
【发布时间】：2019-06-22 20:36:26
【问题描述】：

我正在使用 Kendo UI jQuery 版本 2019.2.514 。我有代码 sn-p

<input id="skuCode" name="skuCode" style="width: 100%;"/>
<input id="productName" name="productName" style="width: 100%;"/>
<script>
    $(document).ready(function () {
        var data = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/sku_json",
                    dataType: "json"
                }
            },
            pageSize: 30
        });
        // create DropDownList from input HTML element
        $("#skuCode").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            filter: "contains",
            index: 0,
            change: onChange
        });
    });

    // Set selected text value of Drop-down list --> value of input productName.
    function onChange() {
        // document.getElementById("productName").value =  document.getElementById("skuCode").value; // Return selected value of drop-down list
        // document.getElementById("productName").value =  document.getElementById("accountObjectCode").text; // I try something like this, but not work.
    }
</script>

网页有 2 个输入：skuCode 是一个下拉列表。 productName 是一个输入文本框。当skuCode 有事件onChange 时，我想自动设置文本框productName 的值（等于所选下拉列表的文本标签，而不是所选下拉列表的值），但仍允许用户编辑。如何做到这一点？

【问题讨论】：

标签： javascript jquery kendo-ui

【解决方案1】：

您可以借助以下方法。

Value 方法：获取或设置 DropDownList 的值。 text 方法：获取或设置 DropDownList 的文本。

这是一个例子：

<input id="skuCode" name="skuCode" style="width: 100%;"/>
<input id="productName" name="productName" style="width: 100%;"/>
<script> $(document).ready(function() {
$("#productName").kendoDropDownList({
   dataSource: [
   { id: 1, name: "Apples" },
   { id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
change: onChange
});
function onChange(e) {
//  You can do with this also
//   $("#skuCode").val($("#productName").data("kendoDropDownList").text());
     $("#skuCode").val(e.sender.text());
 };
});

如果有任何不正确的地方请告诉我。

【讨论】：