Question

首先，这是一个显示我的观点的fiddle。

我有一个带有选择字段的简单表单。起初我只预先加载了一个选项，我想在点击选择字段时加载其余选项。除了将这些选项加载到observableArray选项中之后，即使我在加载之前保存选项然后我尝试恢复它，也可以使用“选择”默认选项标题。

脚本就像

(function() {

    function COption(id, name) {
        this.ID = id;
        this.Name = name;
    }

    var Options = {
        List: ko.observableArray([
            new COption(1, "opt1")
        ]),
        Loaded: false
    }

    var Choice = ko.observable(1);

    function LoadOptions() {
        var opts = [
            new COption(1, "opt1"),
            new COption(2, "opt2"),
            new COption(3, "opt3")
        ];
        // Save current select state
        var currentChoice = Choice();
        console.log("the choice from before load is " + currentChoice);

        // Prevent loading on each click
        if (!Options.Loaded) {
        // Act as if it was an ajax request
            window.setTimeout(function() {
                Options.List(opts);
                Options.Loaded = true;
                // Bring back the state from beforeload
                Choice(currentChoice);
            }, 100);
        }
    }

    function ChangeOption() {

        var index = 1;
        if (Options.List()[index]) {
            console.log("the choice id is now " + Choice());
            Choice(Options.List()[index].ID);

            console.log("and now it is " + Choice());
        }
    }

    var vm = {
        Choice: Choice,
        Options: Options,
        LoadOptions: LoadOptions,
        ChangeOption: ChangeOption
    }

    ko.applyBindings(vm, document.getElementById("page"));

})();

我的观点是

<div id = "page">
    <div>
        <select data-bind = "options: Options.List, optionsCaption: 'Choose', optionsText: 'Name', optionsValue: 'ID', value: Choice, click: LoadOptions"></select>
    </div>
    <div>your choice's id: <span data-bind = "text: Choice"></span></div>
    <div>
        <button type = "button" data-bind = "click: ChangeOption">Option 2 please</button>
    </div>
</div>

我一直想知道这种强制值的变化是否会被绑定的选择字段所遵循。事实证明，按钮证明了这一点（单击“更改选项”按钮后所选选项会发生变化）。

我认为密钥位于Choice(currentChoice);的某个位置。这适用于与按钮一起使用时的更改，而在动态加载选项时则不适用。

是否可以保留所选选项？

编辑：事实证明，我（后来）测试过的每个浏览器（IE，Chrome和FF）都以不同的方式运行，即

Firefox（上面介绍的内容）与我的目标最接近，
Chrome在打开时不会刷新视图中的选择选项列表。它需要隐藏（单击）然后重新打开以显示加载的选项。与FF相比，这看起来很奇怪，
IE只需在加载时关闭（隐藏）选择选项列表。这显然不是我的观点。

这就是为什么我现在的问题更像是：

是否可以在选项打开时动态附加选项（如图所示）？

而且，不幸的是，我可以用另一个fiddle回答自己，这清楚地证明问题很简单：只有Firefox在显示选择时添加了选项。

这让我问你：

什么是跨浏览器方法将内容动态添加/加载到选择菜单中？

......这里的答案是：没有这种可能性（proper explanation）。所以现在我进入了自己的选择控制。超过'n out

Answer 1

有this other question表示在选项打开时向选项添加选项并不是很好的跨浏览器方式。

问题和答案都有0赞成，但我认为他们是正确的。你知道吗，我想我甚至会去let empiricism do its thing（Chrome＆amp; IE10 / 9/8会失败，FF会没事的。）

这意味着您必须使用Select2或Chosen jQuery插件替换常规下拉列表。

根据需要加载选择选项，同时保留beforeload中的select状态

1 个答案: