Como alterar as opções de com jQuery?

Suponha que uma lista de opções esteja disponível, como você atualiza o com o novo s?

Você pode remover as opções existentes usando o método empty e, em seguida, adicionar suas novas opções:

 var option = $('').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); 

Se você tem suas novas opções em um object, você 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($("") .attr("value", value).text(key)); }); 

Edit: Para remover todas as opções, mas a primeira, você pode usar o seletor :gt , para obter todos os elementos da option com índice maior que zero e remove los:

 $('#selectId option:gt(0)').remove(); // remove all options, but not the first 

Eu joguei a excelente resposta do CMS em uma rápida extensão do jQuery:

 (function($, window) { $.fn.replaceOptions = function(options) { var self, $option; this.empty(); self = this; $.each(options, function(index, option) { $option = $("") .attr("value", option.value) .text(option.text); self.append($option); }); }; })(jQuery, window); 

Ele espera uma matriz de objects que contenham chaves “text” e “value”. Então, o uso é o seguinte:

 var options = [ {text: "one", value: 1}, {text: "two", value: 2} ]; $("#foo").replaceOptions(options); 
 $('#comboBx').append($("").attr("value",key).text(value)); 

Onde comboBx é o seu ID da checkbox de combinação.

ou você pode acrescentar opções como string ao innerHTML já existente e então atribuir ao innerHTML selecionado.

Editar

Se você precisa manter a primeira opção e remover todos os outros, então você pode usar

 var firstOption = $("#cmb1 option:first-child"); $("#cmb1").empty().append(firstOption); 

Por alguma estranha razão esta parte

 $el.empty(); // remove old options 

da solução CMS não funcionou para mim, então ao invés disso eu simplesmente usei

 el.html(' '); 

E isso funciona. Então meu código de trabalho agora parece com isso:

 var newOptions = { "Option 1":"option-1", "Option 2":"option-2" }; var $el = $('.selectClass'); $el.html(' '); $.each(newOptions, function(key, value) { $el.append($("") .attr("value", value).text(key)); }); 

Remover e adicionar o elemento DOM é mais lento que a modificação do existente.

Se seus conjuntos de opções tiverem o mesmo tamanho, você pode fazer algo assim:

 $('#my-select option') .each(function(index) { $(this).text('someNewText').val('someNewValue'); }); 

Caso seu novo conjunto de opções tenha tamanho diferente, você pode excluir / adicionar opções vazias de que realmente precisa usando alguma técnica descrita acima.

Se, por exemplo, seu código html contiver este código:

  

Para alterar a lista de opções dentro do seu select, você pode usar este código abaixo. quando seu nome selecionar o named selectId .

 var option = $('').attr("value", "option value").text("Text"); $("#selectId").html(option); 

neste exemplo acima, mudo a antiga lista de opções por apenas uma nova opção.

se atualizarmos constantemente e precisarmos salvar o valor anterior:

 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($('').attr('value', value).text(key)); if (value === prevValue){ $el.val(value); } }); $el.trigger('change'); 

Isso ajuda?

 $("#SelectName option[value='theValueOfOption']")[0].selected = true; 

A velha escola de fazer as coisas à mão sempre foi boa para mim.

  1. Limpe o select e deixe a primeira opção:

      $('#your_select_id').find('option').remove() .end().append('') .val('whatever'); 
  2. Se os seus dados vierem de um Json ou algo assim (apenas Concat os dados):

      var JSONObject = JSON.parse(data); newOptionsSelect = ''; for (var key in JSONObject) { if (JSONObject.hasOwnProperty(key)) { var newOptionsSelect = newOptionsSelect + ''; } } $('#your_select_id').append( newOptionsSelect ); 
  3. Meu Json Objetc:

      [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}] 

Essa solução é ideal para trabalhar com o Ajax e responde no Json a partir de um database.