logo标签列表

获取Kendo下拉框值的选定ID

javascripthtmldrop-down-menukendo-uikendo-dropdown
3

如何从下拉列表中获取所选名称的ID。
当选择Apples时，获得ID为1，选择Oranges时获得ID为2。
这是一个简单的Kendo下拉列表示例。

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

thanks.

4个回答
6
为了获取所选 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);
                  };
3

选择事件是比较难使用的，因为该事件在选取项目之前就会触发。

如果您使用更改事件，应该能够使用以下代码获取数据项：

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

请查看示例： http://jsbin.com/OcOzIxI/2/edit
2
请使用this.dataItem()。
function onSelect(e) {
    alert(this.dataItem().id);
    alert(this.dataItem().Name);
};
1
要选择所选项目的ID，请使用以下代码：

$("#dropdownlist").val()

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

$("#dropdownlist").data("kendoDropDownList").text()
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接