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

正如您在 fiddle 中看到的，添加了新的选择，但它选择了“2”选项。

我还尝试使用 $template.val('0') 重置选择，但这也不起作用。选择仍显示为选中“2”选项。

Answer 1

删除属性 selected 因为在 none DOM 元素上设置属性不会设置它的属性，元素没有链接到 DOM:

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

-DEMO-