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

Question

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

我想单击“添加选择”按钮，然后看到一个新的选择元素添加到 DOM 中，并选择了“0”选项。

这是一个

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

正如您在小提琴中看到的那样，添加了新的选择，但它选择了“2”选项。

我还尝试使用$template.val('0') 重置选择，但这也不起作用。选择仍然出现，并选择了“2”选项。

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/