Knockout.js 如何在knockoutjs中设置optionsCaption的值

如何在knockoutjs中设置optionsCaption的值？例如，在我的应用程序中，我有一个选择框：

<select name="item" id="item" class="input-fo" multiple="multiple" data-bind="
                                    options         : categories,
                                    optionsValue    : '_id',
                                    optionsCaption   :'Select All',
                                    optionsText     : 'name',
                                    selectedOptions : $data['item'],
                                    select2         : {}
                                ">
</select>

---

在选项之上，我将选项标题设置为“全选”。加载页面时，如何设置“全选”选项的值？有谁能告诉我怎么做吗？

这就是我为了让我的工作顺利进行所做的：

HTML:

我的Ajax用于填充阵列：

 $.ajax({
        url: "/URLToYourMethod/GetJobTypes",
        data: {},
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        timeout: 10000,
        success: function (Result) {
            for (var i = 0; i < Result.d.length; i++) {
                element = Result.d[i];
                MyDataViewModel.MyDataSet.push({ MyID: element.MyID, MyOptionsText: element.MyOptionsText});
            }
        },
        error: function (xhr, status) {
            alert(status + " - " + xhr.responseText);
        }
    });

---

这就是问题所在。

如果您希望选择“全部”以获得一个值，则不要使用选项Caption binding。相反，只需添加一个Select All项作为数组MyDataSet的第一个元素，其id属性等于Select All的值。

我在ASP.Net MVC中通过在我用Razor设置的页面底部创建一个全局变量来实现这一点。我喜欢在页面后面命名全局变量，但这是个人偏好

例如：

var MyPage = window.MyPage || {};
MyPage.Terms = {
    SelectAllText: '@Model.Terms.SelectAllText'
};

然后可以从KO模型访问页面全局变量

(function (MyPage) {

    var Model = function() {
        this.terms = {
            selectAll: MyPage.Terms.SelectAll
        };
    };

    ko.applyBindings(new Model());

}(window.MyPage = window.MyPage || {}));

然后在页面标记中，只需访问terms属性

<select name="item" id="item" class="input-fo" multiple="multiple" data-bind="
                                options         : categories,
                                optionsValue    : '_id',
                                optionsCaption  : terms.selectAll,
                                optionsText     : 'name',
                                selectedOptions : $data['item'],
                                select2         : {}
                            ">

这允许我使用服务器端模型设置JavaScript变量。我这样做主要是为了国际化。

如果要隐藏默认的combobox元素，您可以将optionsCaption绑定到视图模型的任何可观察属性，并将其设置为null

以下是您也可以尝试的示例：

HTML:

Options caption: 
<input data-bind="value: defaultCaption" />
Use or not:<input type="checkbox" data-bind="checked: defaultCaptionEnabled" />

<select data-bind="
        value: selected, 
        options: items, 
        optionsText: 'title', 
        optionsValue: 'key', 
        optionsCaption: dynamicOptionsCaption()">
</select>

---

感谢您的回复，但我从数据库中获取了类别如何添加？一种方法可能是使用unshift函数，该函数将元素添加到数组的开头。它看起来像这样：categories.unshift{id:'something'，name:'selectall'}；您好Jacques Bronkhorst谢谢您的回复我收到了一个使用java脚本$'base.changefunction{var selecteItem=$item option:selected；ifselecteItem.text=='Select All'{selecteItem.val'Select_All'；}的点子；它工作得很好，但当我只在选择选项中选择全选，但我需要设置默认值时，这意味着当页面加载时，对不起我的英语。@gow.java这可能就是你所期待的吗？这允许您使用select绑定绑定多个对象

<select name="item" id="item" class="input-fo" multiple="multiple" data-bind="
                                options         : categories,
                                optionsValue    : '_id',
                                optionsCaption  : terms.selectAll,
                                optionsText     : 'name',
                                selectedOptions : $data['item'],
                                select2         : {}
                            ">

Options caption: 
<input data-bind="value: defaultCaption" />
Use or not:<input type="checkbox" data-bind="checked: defaultCaptionEnabled" />

<select data-bind="
        value: selected, 
        options: items, 
        optionsText: 'title', 
        optionsValue: 'key', 
        optionsCaption: dynamicOptionsCaption()">
</select>

var viewModel = function() {

    var self = this;

    self.selected = ko.observable('');
    self.defaultCaption = ko.observable('Select ...');
    self.defaultCaptionEnabled = ko.observable(true);

    self.items = ko.observableArray(
        [
            {key: 'KEY1', title: 'One'},
            {key: 'KEY2', title: 'Two'},
            {key: 'KEY3', title: 'Three'},
            {key: 'KEY4', title: 'Four'},
        ]
    );

    self.dynamicOptionsCaption = ko.computed(function() {
        return self.defaultCaptionEnabled() 
            ? self.defaultCaption()
            : null;
    });   
};

ko.applyBindings(new viewModel());