javascript - テキストドロップダウンリストにバインドする方法は?

Question

剣道ドロップダウンリストがあります。選択したテキストにバインドする必要があります。

ソース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>

値のバインドは成功しましたが、テキストはバインドされていません =(