выпадение выпадающего списка

Question

У меня возникли проблемы с получением выбранного элемента выпадающего списка.

<p> 
    Your Group: 
    <select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select> 
</p> 
<p> 
    I am visible 
    You have chosen <span data-bind="text: selectedGroup() ? selectedGroup().Name : 'Nothing'"></span> 
</p> 

Когда я выберу что-то из выпадающего списка, я хотел бы получить текст выделения, а не значение. Я очень новичок в нокауте и пытаюсь разобраться с этим. Я создал скрипку для этого.

http://jsfiddle.net/voam/FjRxn/

Answer 1

Изменить

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select> 

To:

<select data-bind="options: availableGroups, optionsText: 'Name', value: selectedGroup, optionsCaption: 'Choose...'"></select> 

Answer 2

Для вашего первоначального вопроса @ ответ Пита прав, но так как вы должны сохранить GroupID как значение, которое вы могли бы сделать this (modified fiddle) ,

Первый апартамент selectedGroup был переиздан в selectedGroupId.

Тогда новая вычисленная наблюдаемая selectedGroup была определена на основе selectedGroupId:

self.selectedGroup = ko.computed(function() { 
    for (var i = 0; i < groups.length; i++) { 
    if (groups[i].GroupId == self.selectedGroupId()) 
     return groups[i]; 
    } 
    return null; 
}); 

var self = this Также был определен

Answer 3

Вы также можете использовать функцию подписки на вашей наблюдаемой selectedGroup. Я также создал еще один наблюдаемый как «selectedGroupId».

На подписываться событием я присвоить значение GroupID к новому наблюдаемому «selectedGroupId»

self.selectedGroup.subscribe(function(item) 
    { 
      debugger; 
      self.selectedGroupId(item.GroupId); 
      return item.Name; 
     }); 

Пожалуйста, смотрите обновленный Fiddle here

Answer 4

Я просто хотел, чтобы опубликовать решение я использую в последнее время для решения этой проблемы вопрос. Он использует обработчики привязки (valueAppendText и textFromOption) и добавляет наблюдаемое к наблюдаемому, отслеживаемое выпадающим. Это решение не является полным, но демонстрирует идею не использовать добавление вычисленного для получения выпадающего текста. В этом решении также используется jQuery, который можно удалить, но поскольку я использую jQuery в своих проектах (в основном), я оставил его. В приведенной ниже ссылке jsFiddle демонстрируется функциональность.

Fiddle: http://jsfiddle.net/FjRxn/65/

наценки:

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select> 

<p> 
    I am visible 
    You have chosen <span data-bind="textFromOption: selectedGroup"></span> 
    <div> 
     Group Id: <span data-bind="text: selectedGroup"></span> 
    </div> 
</p> 

переплета Обработчики:

ko.bindingHandlers.valueAppendText = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) { 
     var $element, newValueAccessor, observable, setText; 

     observable = valueAccessor(); 
     observable.selectedOptionText = ko.observable(null); 
     newValueAccessor = function() { 
     return observable; 
     }; 
     $element = $(element); 
     setText = function() { 
     return observable.selectedOptionText($element.find("option:selected").text()); 
     }; 
     setTimeout(setText, 5); 
     $element.change(function() { 
     return setText(); 
     }); 
     return ko.bindingHandlers.value.init(element, newValueAccessor, allBindingsAccessor, context); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, context) { 
     return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, context); 
    } 
    }; 

    ko.bindingHandlers.textFromOption = { 
    update: function(element, valueAccessor, allBindingsAccessor, context) { 
     var newValueAccessor, observable; 

     observable = valueAccessor(); 
     newValueAccessor = function() { 
     if (ko.isObservable(observable.selectedOptionText)) { 
      return observable.selectedOptionText(); 
     } 
     return observable(); 
     }; 
     return ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, context); 
    } 
    }; 

Answer 5

Самым простым решением было бы удалить optionsValue связывания с вашего элемента. Затем он сохранит весь объект в наблюдаемом, и вы сможете добраться до всех своих свойств.

jsfiddle

<select data-bind="options: availableGroups, optionsText: 'Name', 
value: selectedGroup, optionsCaption: 'Choose...'"></select> 

Answer 6

Лично я хотел бы использовать ответ @ pomber, в с небольшим редактирования.

Мне не нравится использовать for-loop в вычисленных наблюдаемых.

Fiddle