選定值未正常工作

Question

小提琴在這裏，包含此代碼：http://jsfiddle.net/enp2T/6/

<select id="aList"> 
    <option value="0">0</option> 
    <option value="100">100</option> 
    <option value="200">200</option> 
    <option value="300">300</option> 
</select> 

<div id="newListContainer"></div> 

$(function() { 
    var value = 300; 
    var clonedList = $('#aList').clone();  

    var listHtml = clonedList 
     .removeAttr('id') 
     .val(value) 
     .wrap('<div/>') 
     .parent() 
     .html(); 

    $('#newListContainer').html(listHtml);  

    //$('#newListContainer>select').val(value); 
}); 

我以爲我選擇的300值將保持不變，但listHtml只包含原始的克隆名單。我處於一種情況，嘗試重新找到對象並在其繪製後設置其值（將其傳遞給另一個外部庫函數延遲渲染，直到稍後再執行，除非我直接修改該庫）我試圖避免）。

那麼我在做什麼可怕的錯誤？缺少一個怪癖？

說明：I 需要將HTML作爲字符串傳遞，因爲正在使用它的庫期待一個字符串。

Answer 1

沒有理由爲此做一個往返標記，我懷疑這是問題所在，因爲jQuery的val設置了select元素的selectedIndex，它沒有被序列化。

只需使用克隆的元素：

var wrappedList = clonedList 
    .removeAttr('id') 
    .val(value) 
    .wrap('<div/>') 
    .parent(); 
// Note: Not doing `.html()` at the end 

// html(...) would empty the container and then add the HTML, so 
// we empty the container and then append the wrapped, cloned list 
$('#newListContainer').empty().append(wrappedList); 

Updated working fiddle

Answer 2

見this鏈接。您不能將value設置爲select，您必須將selected屬性設置爲具有value=300的項目。

$(function() { 
    var value = 300; 
    var clonedList = $('#aList').clone();  
    clonedList.find('option[value="' + value + '"]').attr("selected", true); 
    var listHtml = clonedList 
     .removeAttr('id') 
     //.val(value) 
     .wrap('<div/>') 
     .parent() 
     .html(); 
    $('#newListContainer').html(listHtml);  

    //$('#newListContainer>select').val(value); 
}); 

我有一個錯誤。 @ T.J。克勞德是對的。 jQuery可以設置value的選擇.val(value)函數。 link

$(function() { 
    var value = 300; 
    var clonedList = $('#aList').clone(); 
    var holderCloned = clonedList.removeAttr('id').val(value).wrap('<div/>').parent(); 
    $('#newListContainer').empty().append(holderCloned); 
}); 

Answer 3

jQuery的克隆，不管你選擇的列表 - 這裏的問題是，你沒有什麼選擇有你，所以你要克隆一個下拉菜單沒有選定值（see here）。

有關該腳本的更新版本，請檢查updated jsFiddle。

代碼：

$(function() { 
    var value = 300; 
    var clonedList = $('#aList').clone(); 
    clonedList.find('option[value="' + value + '"]').attr('selected', 'selected'); 

    var listHtml = clonedList 
     .removeAttr('id') 
     .val(value) 
     .wrap('<div/>') 
     .parent() 
     .html(); 

    $('#newListContainer').html(listHtml);  

    //$('#newListContainer>select').val(value); 
});