添加選項的選擇，並選擇它

我有this code 添加選項的選擇，並選擇它

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); 
});

不過，我喜歡的東西更好。有任何想法嗎？

注：我沒有在選擇器或類似的東西中尋找性能。發佈的代碼只是一個簡化的例子，而不是我真正的腳本。

來源

2012-12-11 Diego

是否運行'opt.prop（「selected」，true）.prependTo（「select」）;'在IE中工作？順便說一下，您可能需要'.detach（）'而不是'.remove（）'來保留數據和事件。 – pimvdb

你使用的是什麼版本的jQuery？如果您使用的是最新版本的庫，那麼這種方式無效。 – Pointy

@pointy這是令人驚訝的，但它失敗了，如1.8.2所述。 'prop'作爲@pimvdb建議失敗，雖然我發誓它第一次嘗試但它不會再工作。 –

這似乎適用於所有瀏覽器，但我不知道爲什麼你的原始代碼在IE中失敗。

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

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

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

來源

2012-12-11 14:31:59

不明白爲什麼..但它的作品和它的不錯。謝謝！ – Diego

IE使用隊列系統DOM操作。使用dequeue()： DEMO

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

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

來源

2012-12-11 14:50:43

這真是離奇。你碰巧有關於爲什麼發生這種情況的任何信息？也許一個jQuery的博客文章或東西？這是我聽到的第一個。我在想，如果這可能不是正在發生的事情，而是'dequeue'中的某些內容正在中斷這個過程足夠長的時間來讓DOM更新。 –

我想你可以在MSHTML（三叉戟）規範中找到它。不幸的是，我沒有任何相關的鏈接發佈。 –

以及我無法理解它，我認爲它更好@詹姆斯的方式。但記住這一點真的很好。 +1！ – Diego

這是愚蠢的，但另一種解決方案基於關你想使用原來的解決方案是：

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

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

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

不過不知道爲什麼這是必要的（或從另一個答案dequeue），但它似乎也「解決」了這個問題。

來源

2012-12-11 15:10:16 Ian

這是非常奇怪的。看起來好像調用任何與動畫相關的動畫都是強制DOM更新。似乎你可以把任何動畫相關的地方放在那裏延遲，它的工作原理（fadeOut等） –

以及我無法理解它，我認爲它更好的@詹姆斯方式。然而，你的方式很好，工作。 +1！ – Diego

@Diego我同意James的方式更好 - 這是該操作完成的真正方式。 – Ian

添加選項的選擇，並選擇它

回答

相關問題