更換使用JQuery的html方法

Question

我想知道的下拉列表中的項目，如果通過使用HTML方法如下更新列表框的內容是正確的做法：

<select id="myListbox"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 
<input type="button" id="empty" value="Replace listbox HTML" /> 

$(function(){ 
    $('#empty').click(function(){ 
      $('#myListbox').html('<option value="a">Item A</option><option value="b" selected>Item B</option><option value="c">Item C</option>'); 
    }); 
}); 

https://jsfiddle.net/carolinebeltran/nLqgy20b/

我有測試這和它適用於FF，Chrome和IE。 Firebug不會報告任何錯誤，但我只想確定我所做的事實際上是正確的。

Answer 1

的html()功能將完全對這項工作，你可以考慮手動陣列中存儲你的選擇，然後通過empty()功能清空你的<select>元素並且手動附加每個新<option>，如下圖所示：

// Store your new options in an array 
var newOptions = {'Item A': 'a','Item B': 'b', 'Item C': 'c'}; 
// Clear out your current options 
$('#myListBox').empty(); 
// Add each new option to the element 
$.each(newOptions, function(value,key) { 
    // Create a new <option> appending the values and text and add it to the list 
    $('#myListBox').append($("<option></option>").attr("value", value).text(key)); 
}); 

不要忘記選擇當更換隨着html()

再就是使用html()方法，目前指數塔時要牢記t被選中後仍然會持續發生變化，您可以通過prop()功能處理：

$('#empty').click(function(){ 
    // Update your HTML here 
    $('#myListbox').html('...'); 
    // Remove your selection 
    $('#myListbox :selected').prop('selected', false); 
});