获取kendo下拉值的选定ID

时间:2013-09-11 10:08:17

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

如何从下拉列表中获取所选名称的ID 选择Apples然后选择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>

感谢。

4 个答案:

答案 0 :(得分:5)

要检索所选的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);
                  };

答案 1 :(得分:3)

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

如果您使用Change事件,您应该能够使用

获取dataItem
this.dataSource.get(this.value())

参见示例http://jsbin.com/OcOzIxI/2/edit

答案 2 :(得分:2)

请使用this.dataItem()

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

答案 3 :(得分:0)

要选择所选项目的ID,请使用:

$("#dropdownlist").val()

要选择所选项目的TEXT,请使用:

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