Question

我有这个简单的knockout.js应用程序：

查看：

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

我希望，在我点击span“CLEAR VALUE！”之后，在select中将选择选项“选择...”，但它没有发生。 viewModel中的值设置为“”（空字符串），这是正确的，但用户仍然在select中看到旧值。

有没有办法做到这一点？

感谢您的帮助：）

Answer 1

您必须将绑定类型更改为“value”而不是“selectedOptions”。下一步是在cl函数中设置viewModel.selectedDocument：

viewModel.selectedDocument(null);

Answer 2

在某些情况下，将observable值设置为null将不起作用。例如：

// 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

不能写下这个：

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'">

Knockoutjs清除组合框中的选定值

3 个答案: