在沒有頁面加載的情況下多次操作DOM中的選擇選項選擇值

Question

我處於一個不幸的位置，我需要能夠複製整個HTML塊而無需使用javascript/jquery進行頁面重新加載，包括輸入和選擇。

我大部分工作，但我很難在選擇。爲了讓它「正確地複製」，以便副本顯示從其複製的選定值，我需要在選擇副本上明確設置屬性「selected」。問題是，如果我更改了將從中複製的select的值，則前面的選擇「selected」屬性仍然存在，我不知道如何擺脫它。

這裏是一個小提琴的鏈接，下面是向您展示我的意思的基本測試：fiddle。您需要檢查選擇列表中的元素並顯示所有選項標籤。

1. 進行選擇
2. 按下Enter鍵
3. 觀察選定的屬性去您選擇
4. 的選項來選擇不同的選項
5. 按下回車鍵
6. 觀察到現在二人選項具有選定的屬性。在這一點上我需要從第3步觀察擺脫選定屬性的

HTML：

<table> 
    <tr> 
    <td> 
     <select> 
     <option value="">Select One</option>  
     <option value="test1">Test1</option> 
     <option value="test2">Test2</option> 
     <option value="test3">Test3</option> 
     <option value="test4">Test4</option>  
     </select> 
    </td> 
    </tr> 
</table> 
<button onclick="enterTest()">Enter</button> 

的Javascript

function enterTest(){ 
    var $selectedOption = $("select").children(":selected"); 
    $selectedOption.attr("selected","selected"); 
} 

Answer 1

無需處理option S和selected屬性。

如果值是唯一的，

var $select = $("select"); 
function enterTest(){ 
    $select.clone().val($select.val()).appendTo('body'); 
} 

Demo

否則，使用selectedIndex：

$select.clone().prop('selectedIndex', $select.prop('selectedIndex')) 

Demo