Como alterar as opções de <select> com jQuery?

271

Suponha que uma lista de opções esteja disponível. Como você atualiza o <select>com new <option>s?

mascarar
fonte

Respostas:

600

Você pode remover as opções existentes usando o emptymétodo e adicionar suas novas opções:

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

Se você tiver suas novas opções em um objeto, poderá:

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, exceto a primeira, você pode usar o :gtseletor para obter todos os optionelementos com índice maior que zero e removeeles:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 
CMS
fonte
2
Como permanecer a primeira opção quando vazio ()?
Mask #
2
Se estiver usando inicialização-selecionar , em seguida, adicione o seguinte para atualizar o seleto seletor depois de substituir as opções: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. Caso contrário, as novas opções não serão visíveis na sua lista de seleção.
Phn 30/11
Como posso verificar uma dessas opções?
Darós 04/04/19
Eu pessoalmente acho essa sintaxe um pouco mais limpo para a criação de jQuery nó$el.append($('<option/>', { value: value, text: key }));
rorofromfrance
Obrigado rapazes. se você precisar definir o valor selecionado quando estivermos editando a página para o valor selecionado padrão, podemos usar algo assim no loop para iteração específica, podemos adicionar $ el.append ($ ('<option />', {value : valor, selecionado: 'selecionado', texto: chave}));
Desenvolvedor
79

Joguei a excelente resposta do CMS em uma extensão rápida do 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);

Ele espera uma matriz de objetos que contenham chaves "texto" e "valor". Portanto, o uso é o seguinte:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);
ktusznio
fonte
14
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

onde comboBx é o seu ID da caixa de combinação.

ou você pode anexar opções como string ao innerHTML já existente e depois atribuí-lo ao innerHTML selecionado.

Editar

Se você precisar manter a primeira opção e remover todas as outras, poderá usar

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
rahul
fonte
Você não removeu as opções antigas?
26269 Mask
Deseja limpar os antigos ou apenas adicionar novas opções às opções existentes?
rahul
5

Por alguma estranha razão, esta parte

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

da solução CMS não funcionou para mim, então, em vez disso, simplesmente usei esse

el.html(' ');

E é obras. Então, meu código de trabalho agora se 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($("<option></option>")
    .attr("value", value).text(key));
});
Draco
fonte
3

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

Se seus conjuntos de opções tiverem o mesmo comprimento, você poderá fazer algo assim:

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

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

Yuri Gor
fonte
1

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

<select id="selectId"><option>Test1</option><option>Test2</option></select>

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

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

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

BERGUIGA Mohamed Amine
fonte
1
Por que o OP deveria tentar isso? Por favor, inclua uma explicação do que você fez e por que fez isso não apenas para o OP, mas também para futuros visitantes do SO.
Jay Blanchard
1

Isso ajuda?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;
vierzehn
fonte
3
Esta pergunta é sobre adicionar dinamicamente <opção> a uma <seleção>, não selecionar uma opção específica.
sisve
1

A velha escola de fazer as coisas manualmente sempre foi boa para mim.

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

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. Se seus dados vierem de um Json ou qualquer outra coisa (apenas Concat os dados):

        var JSONObject = JSON.parse(data);
        newOptionsSelect = '';
        for (var key in JSONObject) {
            if (JSONObject.hasOwnProperty(key)) {
                var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
            }
        }
    
        $('#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 respostas no Json a partir de um banco de dados.

Toto
fonte
0

se atualizarmos <select>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($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');
Roman Yakoviv
fonte