如何绑定到文本下拉列表

How bind to text dropdownlist?

本文关键字：文本 下拉列表 绑定 何绑定      更新时间：2023-09-26

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

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

据我所知，您应该有一个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）中定义的函数。

相关文章：