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

Question

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

源代码：

<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) 中定义的函数。