Question

知道为什么下拉列表没有设置其初始值？初始加载显示“选择...”，但我希望它在最底层的初始JSON中提供“NCI值”。

理想情况下，我希望保存JSON不包含下拉列表中的每个项目。这就是我拥有来自不同来源的数据结构的原因。我无法通过下拉菜单使用字符串重新选择正确的项目。

<div data-bind="with: compound">

    <h3>Dose Form</h3>
    <select
        data-bind="options: $root.compoundDoseForm,
                       optionsText: 'name',
                       value: doseForm,
                       optionsCaption: 'Choose...'"></select>

</div>
<p>
    <button data-bind='click: $root.save'>Save to JSON</button>
</p>
<textarea data-bind='value: $root.lastSavedJson' rows='5' cols='60'> </textarea>
<script>
    var Compound = function(data) {
        data = data || {};
        this.doseForm = ko.observable(data.doseForm);
    }

    var CompoundsModel = function(compound) {
        var self = this;
        self.compound = ko.observable(compound);
        self.compoundDoseForm = ko.observableArray([ {
            code : "AA",
            name : "NCI Values"
        }, {
            code : "",
            name : "Not Specified"
        } ]);

        this.save = function() {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.compound), null, 2));
        };
        self.lastSavedJson = ko.observable("");
    }

    ko.applyBindings(new CompoundsModel(new Compound({
        "doseForm" : {
            "code" : "AA",
            "name" : "NCI Values"
        }
    })));
</script>

Answer 1

我在这里遗漏了什么吗？如果是，请解释，我会更新我的答案。

否则，如果您不想要＆＃34;请选择..＆＃34;要成为初始值（仅显示文本，而不是值），然后删除optionsCaption，然后选择列表中的第一项：

<select data-bind="options: $root.compoundDoseForm,
                   optionsText: 'name',
                   value: doseForm"></select>

<强> Updated Fiddle

如果您没有默认选项，或者您希望强制用户选择某些内容并使用验证进行备份（如果它是必填字段），则可以使用optionsCaption。< / p>

Answer 2

只需将select data-bind更改为：

    <select data-bind="options: $root.compoundDoseForm,
                   optionsText: 'name',
                   optionsValue: 'code',
                   value: $root.compound().doseForm().code,
                   optionsCaption: 'Choose...'"></select>

Answer 3

我不得不放弃“名称”和“代码”格式，只使用下拉列表中的字符串数组。这是合理的，因为我保证这些项目是唯一的，我可以将它们转换回代码进行存储。

<div data-bind="with: compound">

    <h3>Dose Form</h3>
    <select
        data-bind="options: $root.compoundDoseForm, value: doseForm,
                   optionsCaption: 'Choose dose form...'"></select>

</div>
<p>
    <button data-bind='click: $root.save'>Save to JSON</button>
</p>
<textarea data-bind='value: $root.lastSavedJson' rows='5' cols='60'> </textarea>
<script>
    var Compound = function(data) {
        data = data || {};
        this.doseForm = ko.observable(data.doseForm);
    }

    var CompoundsModel = function(compound) {
        var self = this;
        self.compound = ko.observable(compound);
        self.compoundDoseForm = ko.observableArray([ "NCI Values", "Not Specified" ]);

        this.save = function() {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.compound), null, 2));
        };
        self.lastSavedJson = ko.observable("");
    }

    ko.applyBindings(new CompoundsModel(new Compound({
        "doseForm" : "NCI Values"
    })));
</script>

恢复knockout.js中的下拉列表

3 个答案: