2

首先，这是一个表明我的观点的小提琴。

我有一个带有选择字段的简单表单。起初我只预加载了一个选择的选项，我想在单击选择字段时加载其余选项。这很好用，除了在将这些选项加载到选项的 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 只是在加载它们时关闭（隐藏）选择选项列表。这显然不是我的观点。

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

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

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

这让我问你：

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

......这又是答案：没有这种可能性（正确的解释）。所以现在我进入了自己的类似选择的控制。结束了

4

1 回答 1

1

还有另一个问题表明，在打开时向选择添加选项不太可能以良好的跨浏览器方式进行。

问题和答案都有 0 票，但我认为他们仍然是对的。你知道吗，我想我什至会去做，让经验主义去做（Chrome & IE10/9/8 会失败，FF 会好）。

这意味着您必须将常规下拉列表替换为Select2或Chosen jQuery 插件之类的内容。

于 2013-09-04T19:12:52.090 回答