Knockoutjs очистить выбранное значение в выпадающем списке

Question

У меня есть это простое приложение knockout.js:

View:

<select data-bind="options: allDocumentTypes , optionsCaption: 'Choose ...', optionsValue: 'id', optionsText: 'name', selectedOptions: selectedDocument"></select>
<span data-bind="click: cl">CLEAR VALUE!</span>

и эта простая ViewModel:

function documentType(id, name){
    this.id = id;
    this.name = name;
}

var viewModel = {
    allDocumentTypes: ko.observableArray([]),
    selectedDocument: ko.observable(''),
    cl: function(){
       viewModel.selectedDocument('');
    }
};

/* load data */
viewModel.allDocumentTypes.push(new documentType(1,'Test 1'));
viewModel.allDocumentTypes.push(new documentType(2,'Test 2'));
ko.applyBindings(viewModel);

Я ожидаю, что после того, как янажмите на промежуток «CLEAR VALUE!», в select будет выбран вариант «выбрать ...», но этого не происходит.Значение в viewModel установлено в «» (пустая строка), что является правильным, но пользователь все еще видит старое значение в select.

Есть ли способ сделать это?

Спасибо за помощь:)

Answer 1

Вы должны изменить тип привязки на «значение» вместо «selectedOptions».Следующим шагом является установка viewModel.selectedDocument в функции cl:

viewModel.selectedDocument(null);

Answer 2

В некоторых случаях установка наблюдаемого значения в ноль не будет работать. Например:

// This is the array
self.timePeriods = ko.observableArray([
    new timePeriod("weekly", 7),
    new timePeriod("fortnightly", 14),
    new timePeriod("monthly", 30),
    new timePeriod("half yearly", 180),
    new timePeriod("yearly", 365)
]);

вот HTML:

<select data-bind="options: timePeriods, 
                                   optionsText: function(item) { 
                                        return item.Name;
                                   }, 
                                   value: selectedPeriod"
                    class="combo">

Вы не можете сбросить поле выбора с помощью:

  self.selectedPeriod(null); // this will not work

Instead, напишите это:

self.selectedPeriod(self.timePeriods()[0]);

Answer 3

<script>
var vm ={ 
CountryId=ko.observable(),
QC=ko.observable(),
clearSelectedStation: function () {
this.CountryId(null);   //DropDown
this.QC('');   //Textbox
}
};
</script>

вот HTML

 <input type="text" tabindex="10" data-bind="value:QC"/>

<select class="dropdownlist" data-bind="options:Countries, value: CountryId, 
optionsCaption: '--Select--', optionsText: 'CountryName', optionsValue: 'CountryId'">