Блог

#javascript #knockout.js #html-select

#javascript #knockout.js #html-выберите

Вопрос:

  <select data-bind="options: myList, value: _selectedPart , optionsCaption: 'None'"></select>
  

 var _selectedPart = ko.observable();
var itemSelected = // get value from DB;

if (itemSelected) {
    _selectedPart(parnerSelected);// works fine // 
} else {
    // select Default option value as "None"
}
  

  <select data-bind="options: myList, value: selectedPart == null ? 'None' : selectedPart "></select>
  

Комментарии:

1. Можете ли вы добавить свое определение _selectdPartner ?

2. Извините, это была опечатка. Теперь я отредактировал. _selectedPart является наблюдаемым, который будет привязывать выбранное значение выпадающего списка.

Ответ №1:

 function Sample() {
    var self = this;
  
    this.myList = ['A', 'B', 'C'];
    this._selectedPart = ko.observable();
  
    this.selectFromDB = function () {
        // random item to simulate "get from DB"
        var randomIndex = Math.floor(Math.random() * this.myList.length);
        var value = self.myList[randomIndex];
        self._selectedPart(value);
    };
    this.reset = function () {
        self._selectedPart(undefined);
    };
}

ko.applyBindings(new Sample());  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<button data-bind="click: selectFromDB">Select Item</button>
<button data-bind="click: reset">Reset</button>
<br>
<select data-bind="options: myList, value: _selectedPart, optionsCaption: 'None'"></select>  

 var itemSelected = // get value from DB;
_selectedPart(itemSelected || undefined);
  

Комментарии:

1. Спасибо, Томалак! Я попробовал этот подход. Тем не менее, если база данных содержит пустое значение — в раскрывающемся списке выбирается первый вариант в списке доступных, вместо выбора «Нет». Хотя значение по умолчанию равно None .

2. Я показал вам, как установить в поле выбора значение по умолчанию. Запустите пример кода в моем ответе. Это работает. Если у вас это не работает, значит, вы делаете что-то другое. Найдите разницу.

3. Если значение из базы данных не определено, то в раскрывающемся списке не выбирается «Нет»

4. Запустите мой код выше. Когда вы устанавливаете для наблюдаемого undefined значение, появляется значение по умолчанию, это наглядно продемонстрировано. Если это не работает для вас, вы на самом деле не устанавливаете наблюдаемое значение undefined , все так просто.

5. Ошибка была в моем коде. Я добавлял какое-то другое значение к «_selectedPart» где-то посередине. Когда я отлаживал, я мог определить это. Кроме того, мне помог ваш пример фрагмента кода.

Ответ №2:

 <select data-bind="options: myList,
                   value: _selectedPart,
                   optionsCaption: 'None',
                   valueAllowUnset: true"></select>
  

Комментарии:

1. Спасибо, Джонатан. Я попробовал этот подход. Тем не менее, не повезло … Если в базе данных не сохранено значение, в качестве выбранного значения (значения по умолчанию) должна отображаться опция «Нет». Но вместо этого он отображает первое значение в выпадающем списке.