Предварительный выбор выпадающего списка

Question

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

public string Name { get; set; } 

public IList<Selector> first { get; set; } 
public IList<Selector> second{ get; set; } 

public string selectedFirst { get; set; } 
public string selectedSecond { get; set; } 

public bool firstEnabled { get; set; } = true; 
public bool secondEnabled { get; set; } = true; 

Я отобразить список на моем веб-интерфейсе в ko.observableArray() и удалось отключить в случае, если один предварительный выбор:

$(document).ready(function() { 
    ko.mapping.fromJSON(ko.toJSON(
     @Html.Raw(JsonConvert.SerializeObject(Model.PostData.targetList))), 
     {}, 
     vm.target); 
    ko.utils.arrayForEach(vm.target(), function (item) { 
     if (item.selectedFirst() != null) { 
     item.secondEnabled(false); 
     } 
     if (item.selectedSecond() != null) { 
     item.firstEnabled(false); 
     } 
    }); 
}); 

И это на мой взгляд:

<table class="table table-condensed"> 
    <tbody>  
    <!-- ko foreach: target --> 
     <tr> 
     <td><span data-bind="text: Name"></span> </td><td> 
      <div class="form-group"> 
      <select class="form-control" 
       data-bind="enable: firstEnabled, options: first, optionsText: 'Name', optionsValue: 'id', value: selectedFirst"> 
      </select> 
      </div> 
     </td> 
     <td> 
      <div class="form-group"> 
       <select class="form-control" data-bind="enable: secondEnabled, options: second, optionsText: 'Name', optionsValue: 'id', value: selectedSecond"></select> 
      </div> 
     </td> 
     </tr> 
    <!-- /ko --> 
    </tbody> 
</table> 

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

Answer 1

У меня нет времени, чтобы точно покрыть ваш случай, но на первый взгляд у вас есть несколько ошибок.

• Вы неправильно используете привязку value. Связывание value должно получать наблюдаемое, к которому привязан ваш выбор. Поэтому в вашем случае это должно быть selectedFirst и selectedSecond соответственно.
• Если вам нужно указать имя участника, которое представляет значение каждого варианта (я думаю, id в вашем случае), используйте привязку optionsValue.

Применяя эти изменения, ваш код должен выглядеть примерно так.

<div class="form-group"> 
    <select class="form-control" data-bind="enable: secondEnabled, options: second, optionsText: 'Name', optionsValue: 'id', value: selectedSecond"></select> 
</div>