jQuery選擇選項不適用於尚未添加到DOM的選項

Question

我正在嘗試在尚未添加到DOM的select元素中選擇一個特定選項，但它似乎不起作用。 我想做的不可能嗎？

我想單擊“添加選擇”按鈕，並看到添加到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')重置select，但這也不起作用。 選擇仍然顯示，選擇“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);
    });

更新了小提琴 。

Answer 3

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

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