Ersetzen Dropdown-Listenelemente mit JQuery html Methode

Question

Ich mag würde wissen, ob die Inhalte eines listbox Aktualisierung durch die HTML-Methode wie folgt ein richtiger Ansatz ist:

<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/

I-Test habe Dies und es funktioniert auf FF, Chrome und IE. Firebug meldet keine Fehler, aber ich möchte nur sicher sein, dass das, was ich mache, tatsächlich korrekt ist.

Answer 1

Die html() Funktion absolut dafür arbeiten, könnten Sie Ihre Optionen innerhalb eines Arrays betrachten zu speichern und dann <select> Element über die empty() Funktion manuell entleert und manuell jeden neuen <option> anhängt wie unten zu sehen:

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

Sie Auswahl nicht vergessen, wenn html() Ersetzen Mit

anderer Sache im Auge zu behalten, wenn der html() Ansatz, dass der aktuelle Index tha mit t ist, wird nach wie vor beibehalten werden ausgewählt, nachdem die Änderung vorgenommen wird, die Sie kümmern sich um über die prop() Funktion übernehmen könnte:

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