如何绑定到文本下拉列表？

Question

我有kendoui下拉列表。 我需要绑定到选定的文本。

来源html：

<span style="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="Pests_listbox" aria-busy="false" aria-activedescendant="Pests_option_selected">
     <span class="k-dropdown-wrap k-state-default k-state-focused" unselectable="on">
     <span class="k-input" unselectable="on">Big Headed Ants</span>
     <span class="k-select" unselectable="on">
     <span class="k-icon k-i-arrow-s" unselectable="on">select</span>
     </span>
     </span>
<input type="hidden" data-bind="events: { select: roleSelected }, value: pets.id, text: pets.name" name="Pets" id="Pets" value="ABTB" data-role="dropdownlist" style="display: none;"></span>

值绑定成功，但文本未绑定=（

Answer 1

据我了解，您应该拥有一个类似于以下内容的HTML：

<input name="Pets" id="Pets"
       data-text-field="name"
       data-value-field="id"
       data-bind="events: { select: roleSelected }, source: pets"
       value="ABTB" data-role="dropdownlist"/>

然后您的JavaScript应该是：

var viewModel = kendo.observable({
    roleSelected: function (e) {
        console.log("roleSelected", e);
    },
    pets        : [
        {id: 1, name: "name1" },
        {id: 2, name: "name2" },
        {id: 3, name: "name3" },
        {id: 4, name: "name4" },
        {id: 5, name: "name5" },
        {id: 6, name: "name6" },
        {id: 7, name: "ABTB" }
    ]
});
kendo.bind($("#Pets"), viewModel);

如您所见，事件侦听器（ roleSelected ）是模型（ viewModel ）中定义的函数。