Suponha que está disponível uma lista de opções, como actualiza o <select>
com novo <option>
s?
Pode remover as opções existentes utilizando o método empty
, e depois adicionar as suas novas opções:
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);
Se tiver as suas novas opções num objecto, pode:
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));
});
Editar: Para remover todas as opções excepto a primeira, pode utilizar o selector :gt
, para obter todos os elementos de opção
com índice maior que zero e remove` eles:
$('#selectId option:gt(0)').remove(); // remove all options, but not the first
Atirei a excelente resposta CMS's para uma rápida extensão 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);
Espera um conjunto de objectos que contenham "texto" e "valor" chaves. Por isso, a utilização é a seguinte:
var options = [
{text: "one", value: 1},
{text: "two", value: 2}
];
$("#foo").replaceOptions(options);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
onde comboBx é o seu id de caixa de combinação.
ou pode anexar opções como string ao já existente innerHTML e, em seguida, atribuir ao seleccionado innerHTML.
*Editar**
Se precisar de manter a primeira opção e remover todas as outras, então pode usar
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);