Javascript 克隆项上的选定值未按预期工作

Fiddle在这里，包含以下代码：

0
100
200
300
$（函数（）{
var值=300；
var clonedList=$（'#aList'）.clone（）；
var listHtml=clonedList
.removeAttr（'id'））
.val（值）
.wrap（“”）
.parent（）
.html（）；
$（'#newListContainer'）.html（listHtml）；
//$（'#newListContainer>select'）.val（值）；
});

我原以为我选择的值300会被保留，但listHtml只包含原始列表的一个克隆。我所处的情况是，在绘制对象后尝试重新查找对象并设置其值会很痛苦（将其传递给另一个外部库函数会将渲染延迟到稍后，除非我直接修改该库，否则不会进行完全回调，我正试图避免这种情况）

那么我是不是做错了什么？错过了一个怪癖

---

澄清：我需要将HTML作为字符串传递，因为使用它的库需要一个字符串。

没有理由为此而往返于标记，我怀疑这就是问题所在，因为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);

var wrappedList=clonedList
.removeAttr（'id'））
.val（值）
.wrap（“”）
.parent（）；
//注意：结尾不执行“.html（）”
//html（…）将清空容器，然后添加html，因此
//我们清空容器，然后附加包装好的克隆列表
$（'#newListContainer'）.empty（）.append（wrappedList）；

---

没有理由为此而往返标记，我怀疑这就是问题所在，因为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);

var wrappedList=clonedList
.removeAttr（'id'））
.val（值）
.wrap（“”）
.parent（）；
//注意：结尾不执行“.html（）”
//html（…）将清空容器，然后添加html，因此
//我们清空容器，然后附加包装好的克隆列表
$（'#newListContainer'）.empty（）.append（wrappedList）；

请参阅链接。不能将

值设置为
选择
，必须将
选择的
属性设置为
值=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);
});  

见链接。不能将
值设置为
选择
，必须将
选择的
属性设置为
值=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);
});  

jQuery用您选择的任何内容克隆列表-这里的问题是您没有选择任何内容，因此您克隆的下拉列表没有选择值（）

有关该脚本的更新版本，请选中此项

代码：

$（函数（）{
var值=300；
var clonedList=$（'#aList'）.clone（）；
clonedList.find（'option[value=“”+value+''“]'））.attr（'selected'，'selected'）；
var listHtml=clonedList
.removeAttr（'id'））
.val（值）
.wrap（“”）
.parent（）
.html（）；
$（'#newListContainer'）.html（listHtml）；
//$（'#newListContainer>select'）.val（值）；
});
jQuery使用您选择的内容克隆列表-这里的问题是您没有选择任何内容，因此您克隆的下拉列表中没有选择的值（）

有关该脚本的更新版本，请选中此项

代码：

$（函数（）{
var值=300；
var clonedList=$（'#aList'）.clone（）；
clonedList.find（'option[value=“”+value+''“]'））.attr（'selected'，'selected'）；
var listHtml=clonedList
.removeAttr（'id'））
.val（值）
.wrap（“”）
.parent（）
.html（）；
$（'#newListContainer'）.html（listHtml）；
//$（'#newListContainer>select'）.val（值）；
});
jQuery使用您选择的任何内容克隆列表-这里的问题是您没有选择任何内容，因此您克隆的下拉列表中没有选择的值（）@ZathrusWriter：注意
克隆
之后的
val
。jQuery用您选择的内容克隆列表-这里的问题是您没有选择任何内容，因此您克隆的下拉列表没有选择的值（）@ZathrusWriter：注意
val
在
clone
之后。jQuery的
val
确实适用于
select
元素。问题在于往返，它会丢失
select
的
selectedIndex
。这也是可行的，因为
选项
元素的
selected
属性是序列化的。但同样，没有理由往返于标记。jQuery的
val
确实可以处理
select
元素。问题在于往返，它会丢失
select
的
selectedIndex
。这也是可行的，因为
选项
元素的
selected
属性是序列化的。但同样，没有理由往返于标记。“这里的问题是，您没有选择任何内容”，但在克隆后，OP会显式地在克隆的
select
上设置一个值。@t.J.Crowder这是我指的一点：“我以为我选择的值300会保持不变”-但是@Zathrus没有选择任何内容：也许OP使用的“维护”一词并不完美，但关键是，他/她正在明确设置克隆的
select
（
val
与
select
s一起工作），当添加
select
时，它没有设置。@T.J.Crowder我们可以在这里提出很多观点，我们可以将这场辩论扩展为一场火焰战：P但是，是的，我明白你的意思，希望你明白我的意思。。。重要的是OP现在有了答案：）@Zathrus：事实上，我不明白你在说什么，但我明白并不一定重要。：-）T
$(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);
});