按需加载选择选项，同时保留加载前的选择状态

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)。所以现在我进入了自己的类似选择的控制。结束了

Answer 1

this other question 表明在选择打开时向其添加选项不太可能以良好的跨浏览器方式进行。

问题和答案都有 0 票，但我认为他们仍然是对的。你知道吗，我想我什至会去let empiricism do its thing（Chrome 和 IE10/9/8 会失败，FF 会没事）。

这意味着您必须将常规下拉菜单替换为 Select2 或 Chosen jQuery 插件。