knockout.js Knockoutjs清除组合框中的选定值

pb3skfrl 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(173)

我有一个简单的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中将选中选项“choose..."，但它没有发生。viewModel中的值被设置为“”（空字符串），这是正确的，但用户仍然在select中看到旧值。
有什么办法吗？
感谢您的帮助：）

knockout.js

来源：https://stackoverflow.com/questions/8137222/knockoutjs-clear-selected-value-in-combobox

3条答案

按热度按时间

pdtvr36n1#

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

viewModel.selectedDocument(null);

赞(0）回复(0）举报 2022-11-10

qacovj5a2#

在某些情况下，将可观察值设置为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); // but this will not work

代之以这样写：

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

赞(0）回复(0）举报 2022-11-10

dced5bon3#

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

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js Knockoutjs清除组合框中的选定值

3条答案

相关问题

热门标签

最新问答