Como você remove todas as opções de uma caixa de seleção e adiciona uma opção e seleciona-a com o jQuery?


1077

Usando o jQuery principal, como você remove todas as opções de uma caixa de seleção e adiciona uma opção e seleciona-a?

Minha caixa de seleção é a seguinte.

<Select id="mySelect" size="9"> </Select>

EDIT: O código a seguir foi útil no encadeamento. No entanto, (no Internet Explorer) .val('whatever')não selecionou a opção que foi adicionada. (Eu usei o mesmo 'valor' em ambos .appende .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

Edição: tentando fazê-lo para imitar este código, eu uso o seguinte código sempre que a página / formulário é redefinido. Essa caixa de seleção é preenchida por um conjunto de botões de opção. .focus()estava mais perto, mas a opção não apareceu selecionada como com .selected= "true". Nada está errado com meu código existente - estou apenas tentando aprender jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: resposta selecionada foi perto do que eu precisava. Isso funcionou para mim:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Mas ambas as respostas me levaram à minha solução final ..

Respostas:


1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

3
@ Nickf: Eu tenho o mesmo problema, mas preciso adicionar um conjunto de caixas de seleção em vez de uma na mudança de lista suspensa, mas minhas caixas de seleção são provenientes de xml. Isso não funciona #
11481

10
Note que você também poderia acabar com a opção / attr / texto como:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley

1
@BrockHensley, acredito que a verdadeira elegância dessa resposta seja o encadeamento adequado em combinação com a função end (). Sua sugestão também funcionará. Na documentação da API do jQuery: "A maioria dos métodos de passagem DOM do jQuery opera em uma instância de objeto jQuery e produz uma nova, combinando um conjunto diferente de elementos DOM. Quando isso acontece, é como se o novo conjunto de elementos fosse empurrado para uma pilha que é mantido dentro do objeto. Cada método de filtragem sucessivo coloca um novo conjunto de elementos na pilha. Se precisarmos de um conjunto mais antigo, podemos usar end () para retirar os conjuntos da pilha ".
Anthony Mason

1
essa foi a única maneira de reconstruir meu menu e alterar a opção selecionada no jQuery Mobile no PhoneGap para iOS. Também foi necessário atualizar o menu depois.
xited

3
@BrockHensley você pode até mesmo ir tão longe.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns

710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

34
Apenas por curiosidade, é 'vazio' mais rápido que 'encontrar'? Parece que seria - porque o 'achado' usaria um seletor e 'vazio' apenas a força bruta esvaziaria o elemento.
Dan Esparza

52
@DanEsparza eu te fiz um jsperf; empty()acabou mais rápido, claro;) jsperf.com/find-remove-vs-empty
vzwick

Eu tenho uma falha estranha com esta solução. A parte preenchida está boa, mas quando tento selecionar um valor (no meu caso por dia), posso consolar o valor do console, mas o valor mostrado no campo de seleção permanece no primeiro valor .... resolva: /
Takács Zsolt 07/10

5
@ TakácsZsolt Talvez você deva adicionar um .val('whatever')no final da cadeia, como na resposta de Matt.
Kodo Johnson

.empty () trabalha com materializar, enquanto .remove () não funcionou
OverlordvI

127

por que não usar apenas javascript simples?

document.getElementById("selectID").options.length = 0;

7
Concordo que esta é a solução mais simples para a remoção de todas as opções, mas que só responde a metade da questão ...
Elezar

2
Isso não criaria um vazamento de memória? Os elementos de opção agora estão inacessíveis, mas ainda estão alocados.
Synetech 6/03/19

1
JS velho liso FTW (para a vitória) !!! :)
raddevus

78

Se seu objetivo é remover todas as opções da seleção, exceto a primeira (normalmente a opção 'Por favor, escolha um item'), você poderá usar:

$('#mySelect').find('option:not(:first)').remove();

10
Essa deve ser a resposta. Todos os outros removeram intencionalmente o primeiro, com a intenção de recriá-lo depois, o que não gosto; isso também implica que eles também armazenaram a primeira opção em algum lugar primeiro.

76

Eu tive um bug no IE7 (funciona bem no IE6), onde o uso dos métodos jQuery acima limparia a seleção no DOM, mas não na tela. Usando a barra de ferramentas do desenvolvedor do IE, pude confirmar que a seleção foi desmarcada e tinha os novos itens, mas visualmente a seleção ainda mostrava os itens antigos - mesmo que você não pudesse selecioná-los.

A correção foi usar métodos / propriedades DOM padrão (como o original do pôster tinha) para limpar em vez do jQuery - ainda usando o jQuery para adicionar opções.

$('#mySelect')[0].options.length = 0;

6
Eu tive que usar esse método no ie6 também porque .empty () fez com que minha caixa de seleção contida em um contêiner oculto se tornasse visível mesmo enquanto o pai estava oculto.
Código Commander

2
Este método também acaba por ser um pouco (cerca de 1%) mais alto desempenho: jsperf.com/find-remove-vs-empty
vzwick

3
+1 este é o mais legível (na minha opinião) e em ligação JSPerf (@vzwick ligada) a resposta aceita foi de 34% mais lento (Opera 20)
Morvael

35

Não sabe exatamente o que você quer dizer com "adicione um e selecione-o", pois ele será selecionado por padrão de qualquer maneira. Mas, se você adicionar mais de um, faria mais sentido. Que tal algo como:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Resposta a "EDITAR" : Você pode esclarecer o que quer dizer com "Esta caixa de seleção é preenchida por um conjunto de botões de opção"? Um <select>elemento não pode (legalmente) conter <input type="radio">elementos.


27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

2
Ainda estamos usando o IE6 e esse método não funcionou. No entanto, ele funcionou no FF 3.5.6
Jay Corbett

3
pode ter que adicionar .change () na extremidade para desencadear a mudança de selecione
Hayden Chambers

22
$("#control").html("<option selected=\"selected\">The Option...</option>");

12

Graças às respostas que recebi, consegui criar algo como o seguinte, que se adapte às minhas necessidades. Minha pergunta era um tanto ambígua. Obrigado por acompanhar. Meu problema final foi resolvido incluindo "selected" na opção que eu queria selecionar.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>


8

Que tal apenas mudar o html para novos dados.

$('#mySelect').html('<option value="whatever">text</option>');

Outro exemplo:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

8
  1. A primeira opção limpar todas as existentes executa a primeira (- Selecionar--)

  2. Anexar novos valores de opção usando o loop um por um

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }

7

Eu encontrei na net algo como abaixo. Com milhares de opções como na minha situação é muito mais rápido do que .empty()ou .find().remove()de jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Mais informações aqui .



7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

A primeira linha de código removerá todas as opções de uma caixa de seleção, pois nenhuma opção foi encontrada.

A segunda linha de código adicionará a opção com o valor especificado ("testValue") e o texto ("TestText").


Embora isso possa responder à pergunta, seria muito mais útil se você fornecesse uma explicação sobre como ela a responde.
Nick

6

Com base na resposta de Mauretto, isso é um pouco mais fácil de ler e entender:

$('#mySelect').find('option').not(':first').remove();

Para remover todas as opções, exceto uma com um valor específico, você pode usar este:

$('#mySelect').find('option').not('[value=123]').remove();

Isso seria melhor se a opção a ser adicionada já estivesse lá.


4

Usa o jquery prop () para limpar a opção selecionada

$('#mySelect option:selected').prop('selected', false);

1
.prop () somente entra em vigor no jQuery 1.6+. Para jQuery 1.5-, use .attr ()
Agi Hammerthief

4

Isso substituirá o mySelect existente por um novo mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

4

Você pode fazer isso simplesmente substituindo o html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

4

Apenas uma linha para remover todas as opções da marca de seleção e, depois de adicionar qualquer opção, faça a segunda linha para adicionar opções.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

2
  • salve os valores das opções a serem anexados em um objeto
  • limpe as opções existentes na tag de seleção
  • itere o objeto de lista e anexe o conteúdo à tag de seleção pretendida

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



1

Espero que funcione

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

ele funciona se mais, em seguida, a opção i não pode selecionar o segundo
Anburaj_N

0
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.