获取剑道下拉值的选定ID答案

【问题标题】：get selected id of kendo drop down value获取剑道下拉值的选定ID
【发布时间】：2013-09-15 07:22:13
【问题描述】：

如何从下拉列表中获取所选名称的 ID。
当你选择Apples然后得到id 1然后选择Oranges然后2。
这是一个简单的剑道下拉示例。

<body>
            <input id="dropdownlist" />

            <script>
                $("#dropdownlist").kendoDropDownList({
                  dataSource: [
                    { id: 1, name: "Apples" },
                    { id: 2, name: "Oranges" }
                  ],
                  dataTextField: "name",
                  dataValueField: "id",
                  index: 1,
                  select: onSelect
                });

                function onSelect(e) {
                console.log(e);
                  };
            </script>
</body>

谢谢。

【问题讨论】：

标签： javascript html drop-down-menu kendo-ui kendo-dropdown

【解决方案1】：

为了检索选定的 ID，您可以使用 dataItem 对象并通过 change 事件访问其中的 ID：

 var dataItem = e.sender.dataItem();
 $('#id').text(dataItem.id);

这将使您也可以访问对象中的任何数据：

$('#name').text(dataItem.name);

工作示例

http://jsfiddle.net/ygBq8/1/

HTML

<input id="dropdownlist" /><br/>
<span id="id" >Id</span><br/>
<span id="name" >Name</span><br/>

JavaScript

$("#dropdownlist").kendoDropDownList({
                  dataSource: [
                    { id: 1, name: "Apples" },
                    { id: 2, name: "Oranges" }
                  ],
                  dataTextField: "name",
                  dataValueField: "id",
                  index: 1,
                  change: onChange
                });

                function onChange(e) {
                   var dataItem = e.sender.dataItem();
                   $('#id').text(dataItem.id);
                   $('#name').text(dataItem.name);
                  };

【讨论】：

【解决方案2】：

Select 事件使用起来有点困难，因为该事件在项目被选中之前触发。

如果你使用Change事件，你应该可以用

this.dataSource.get(this.value())

查看示例http://jsbin.com/OcOzIxI/2/edit

【讨论】：

【解决方案3】：

请使用 this.dataItem()

function onSelect(e) {
    alert(this.dataItem().id);
    alert(this.dataItem().Name);
};

【讨论】：

【解决方案4】：

要选择所选项目的 ID，请使用：

$("#dropdownlist").val()

并选择所选项目的 TEXT 使用：

$("#dropdownlist").data("kendoDropDownList").text()

【讨论】：