将选项添加到选择并选择它答案

【问题标题】：Add option to a select and select it将选项添加到选择并选择它
【发布时间】：2012-11-29 02:25:45
【问题描述】：

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt).val(1);
});

这在某些浏览器中运行良好。但是，当然，IE 不是其中之一。在 IE 中，组合以两个选项结束，但文本为空白（没有选定的选项）。我认为这是因为该选项仍未加载到 DOM 中。我假设因为我可以使用this code 轻松解决此问题：

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt);
    setTimeout(function() {
        $("select").val(1);
    }, 1);
});

但是，我更喜欢更好的东西。有什么想法吗？

注意：我不是在寻找选择器的性能或类似的东西。发布的代码只是一个简化的示例，不是我的真实脚本。

【问题讨论】：

在 IE 中运行 opt.prop("selected", true).prependTo("select"); 是否有效？顺便说一句，您可能希望.detach() 而不是.remove() 来保存数据和事件。
您使用的是什么版本的 jQuery？如果您使用的是最新版本的库，这将不起作用，这有点令人惊讶。
@pointy 令人惊讶，但它失败了，如 1.8.2 所述。 @pimvdb 建议的prop 也失败了，尽管我发誓它在我第一次尝试时有效，但不会再次有效。
@IHateLazy 在我的 IE9 中，选择变为未选择，而不是选择数字 1。
如果我这样做的话，对我有用.val(1).val(1)

标签： javascript jquery dom-manipulation

【解决方案1】：

这很愚蠢，但是基于您考虑使用的原始解决方案的另一种解决方案是：

http://jsfiddle.net/N2UF4/1/

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt).delay(1).val(1);
});

仍然不确定为什么这是必要的（或其他答案中的dequeue），但它似乎也“解决”了问题。

【讨论】：

这一切都很奇怪。似乎调用任何与动画相关的东西都会强制更新 DOM。似乎您可以在那里放置几乎任何与动画相关的东西来代替延迟，并且它可以工作（淡出等）
虽然我无法理解，但我认为@James 的方式更好。但是，您的方式很好并且有效。 +1！
@Diego 我同意 James 的方式更好 - 这是完成此操作的真正方式。

【解决方案2】：

IE 使用队列系统进行 DOM 操作。使用dequeue()： DEMO

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt).dequeue().val(1)
});

【讨论】：

这真的很奇怪。你碰巧有任何关于为什么会发生这种情况的信息吗？也许是 jquery 博客文章之类的？这是我第一次听说这个。我想知道这可能不是正在发生的事情，而是dequeue 中的某些东西中断了该过程足够长的时间以让 DOM 更新。
我想你可以在 MSHTML（三叉戟）规范中找到它。不幸的是，我没有任何相关链接可以发布。
虽然我无法理解，但我认为@James 的方式更好。但是，记住这一点真的很好。 +1！
@James Montagne：事实证明，它归结为一个简单的访问器，这是选择所必需的。如果在.val(1) 之前添加一个虚拟.each(function() { this[0]; })，那么它可以工作。
我提交了一个错误，因为这是 jQuery 可以解决的问题：bugs.jquery.com/ticket/13032.

【解决方案3】：

这似乎适用于所有浏览器，但我不知道为什么您的原始代码在 IE 中失败。

var opt = $("select option:first");
opt.detach();

$("button").on("click", function() {
    $("select").prepend(opt).prop("selectedIndex", 0);
});

http://jsfiddle.net/tEUxg/5/

【讨论】：