Knockoutjs claire valeur sélectionnée dans combobox

Question

Je cette simple application knockout.js:

Vue:

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

et ce simple 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); 

je me attends, que, après i cliquez sur span "CLEAR VALUE!", sélectionnez l'option "choose ...", mais cela ne se produit pas. La valeur dans viewModel est définie sur "" (chaîne vide), ce qui est exact, mais l'utilisateur voit toujours l'ancienne valeur dans select.

Y a-t-il un moyen de le faire?

Merci de nous aider :)

Answer 1

Vous devez modifier le type de liaison à la "valeur" au lieu de "selectedOptions". L'étape suivante consiste à définir viewModel.selectedDocument en fonction cl:

viewModel.selectedDocument(null); 

Answer 2

Dans certains cas, la mise en valeur observable null ne sera pas exemple work.For:

// 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) 
]); 

est le code html ici:

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

vous ne pouvez pas réinitialiser la boîte de sélection par:

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

insetead écrire ceci:

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> 

ici est un 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'">