Să presupunem că avem o listă de opțiuni disponibile. Cum se poate de actualizat valoarea lui <select>
cu o nouă <option>
?
Puteți elimina opțiunile deja existente prin funcția empty
, și apoi adăugați noi opțiuni:
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);
Dacă aveți opțiunile stocate într-un obiect, puteți să încercați așa:
var newOptions = {"Option 1": "value1",
"Option 2": "value2",
"Option 3": "value3"
};
var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
Editare: Pentru a selecta toate opțiunile înafară de prima :gt
, puteți folosi funcția remove
. Exemplu:
$('#selectId option:gt(0)').remove(); // remove all options, but not the first
Am creat o extensie pentru jQuery:
(function($, window) {
$.fn.replaceOptions = function(options) {
var self, $option;
this.empty();
self = this;
$.each(options, function(index, option) {
$option = $("<option></option>")
.attr("value", option.value)
.text(option.text);
self.append($option);
});
};
})(jQuery, window);
Această funcție primește ca parametru un Array cu obiecte care conțin cheile "text"
și "value"
. Puteți să o folosiți așa:
var options = [
{text: "one", value: 1},
{text: "two", value: 2}
];
$("#foo").replaceOptions(options);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
unde comboBx este ID-ul elementului tăy
sau puteți să adăugați opțiuni noi folosind innerHTML (JS)
Editare
Dacă doriți să păstrați doar prima opțiune, și restul să le ștergeți, folosiți asta:
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
Această parte este un pic cam stranie
$el.empty(); // remove old options
puteți să o înlocuiți ușor cu asta
el.html(' ');
Și totul lucrează. Acum codul meu arată cam așa:
var newOptions = {
"Option 1":"option-1",
"Option 2":"option-2"
};
var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
Ștergerea, adăugarea, toate aceste operații făcute cu DOM sunt cam lente. Dacă opțiunile DVS. au aceiași lungime, încercați asta:
$('#my-select option')
.each(function(index) {
$(this).text('someNewText').val('someNewValue');
});
În cazul în care opțiunile au lungimi diferite, folosiți răspunsurile oferite mai sus.
O metodă folosită de oamenii trecuți prin "școala veche":
$('#your_select_id').find('option').remove()
.end().append('<option value="0">Select...</option>')
.val('whatever');
var JSONObject = JSON.parse(data);
newOptionsSelect = '';
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObjec"key]["text"]+'</option>';
}
}
$('#your_select_id').append( newOptionsSelect );
[{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
Această variantă este ideală pentru transmiterea datelor prin AJAX.
Dacă codul tău HTML ar fi așa:
<select id="selectId"><option>Test1</option><option>Test2</option></select>
ai putea să folosești acest cod pentru a modifica opțiunile
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);
în exemplul de mai sus, am schimbat o opțiune cu una nouă
Dacă faci update la un <select>
și ai nevoie să salvezi valoarea precedentă:
var newOptions = {
'Option 1':'value-1',
'Option 2':'value-2'
};
var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
$el.append($('<option></option>').attr('value', value).text(key));
if (value === prevValue){
$el.val(value);
}
});
$el.trigger('change');