追加選項後選擇框，選擇不尊重

我見過很多關於使用jQuery動態追加選項到選擇框的其他問題，我按照他們的指示，但它仍然沒有選擇該選項。這裏的HTML：追加選項後選擇框，選擇不尊重

<select id="updated-value-dropdown" class="form-control" style="min-width: 10em;"> 
</select>

而這裏的Java腳本：

$('#edit-modal').on('show.bs.modal', function (e) { 
    target_element = $(this).find('#updated-value-dropdown'); 
    target_element.html(''); // clear options 
    var add_options = getOptionsToAdd(); 
    for (var i = 0; i < add_options.length; i++) { 
    target_element.append(new Option(add_options[i], add_options[i], i === 0, i === 0)); 
    } 
}

結果與正確選項的下拉框，我可以看到，當我檢查網頁的第一個選項是在HTML中標記爲「selected」，因爲它應該是，但它仍然不顯示爲實際選擇時顯示模式...爲什麼這不工作？

這是下拉的樣子在頁面上（沒有點擊它）：

這是下拉的樣子，當我點擊它 - 因爲你可以看到，第一個選項是「選擇」有複選標記旁邊，但你可以在上面的圖片中看到，它實際上沒有出現在實際框中的值（除非我手動點擊值）：

另外，我使用的引導，我不知道這有什麼關係呢？

來源

2017-10-11 Dasmowenator

你能告訴我們所有必要的代碼..也許問題是當它在模態顯示.. –

噢，上帝，我是個白癡 - 代碼中有另一個地方叫target_element.val(...)，並將它設置爲一個不是選項列表中選項之一的值，所以這是清除值I試圖選擇。

來源

2017-10-11 18:53:15 Dasmowenator

不要說自己是白癡，所有人（包括我）有時會犯錯:-)很高興你找到了它。 –

-1

你可以這樣做（在你的最後一行）：

target_element 
.append(new Option(add_options[i], add_options[i], i === 0, i === 0)) 
.promise() 
.done(function() { 
    target_element.find('option:first').prop('selected',true); 
    //if you want to select first option after append really done 
});

對不起，如果我誤解你的需要，但我告訴你方式。

來源

2017-10-11 02:34:21

感謝您的答覆。我剛剛嘗試過，但結果與以前相同。 – Dasmowenator

在這種情況下，什麼是.promise？你覺得你在等什麼？我沒有看到任何動畫。 –

@KevinB不會錯，'.promise（）'不僅僅適用於動畫，它適用於ajax，甚至DOM插入，就像'.append（）'，'.html（）'，它們很少（甚至有時候）沒有'.promise（）'有風險。你應該多讀些關於它。 –

追加選項後選擇框，選擇不尊重

回答

相關問題