jQuery选择选项不适用于尚未添加到DOM的

Question

我试图在尚未添加到DOM的select元素中选择一个特定选项，但它似乎不起作用。我试图做的不可能吗？

我想点击＆＃34;添加选择＆＃34;按钮，并使用＆＃34; 0＆＃34;查看添加到DOM的新选择元素。选择了选项。

这是

JsFiddle

HTML

<div id="container">
    <select class="mySelect">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
    </select>
</div>

<button id="addSelect">Add Select</button>

JS

$(document).ready(function() {
    var $template = $('.mySelect').first().clone(),
        $container = $('#container');

    $template.find('option').each(function(i, option) {
       $(option).prop('selected', false); 
    });

    $('#addSelect').click(function(e) {
        e.preventDefault();
        $container.append($template.clone());
    });
});

正如你可以在小提琴中看到的那样，新的选择被添加，但它有＆＃34; 2＆＃34;选择了选项。

我也尝试使用$template.val('0')重置选择，但这也不起作用。选择仍然出现在＆＃34; 2＆＃34;选择了选项。

Answer 1

删除属性selected，因为在无DOM元素上设置属性不设置其属性，元素未链接到DOM：

$template.find(':selected').removeAttr('selected');

-DEMO-

Answer 2

 $('#addSelect').click(function(e) {
        e.preventDefault();
        var $a = $template.clone();
        $a.find('option').prop('selected',false)
        $container.append($a);
    });

更新了fiddle。

Answer 3

$template.find('option:selected').removeAttr('selected');

http://jsfiddle.net/Lm7d714q/8/