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

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 ..

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

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

por que não usar apenas javascript simples?

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

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();

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;

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.

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

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

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>

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>
');

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));
   }

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 .

Outra maneira:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Sob este link, existem boas práticas https://api.jquery.com/select/

$("#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").

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á.

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

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

Isso substituirá o mySelect existente por um novo mySelect.

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

Você pode fazer isso simplesmente substituindo o html

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

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'));

• 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>

Eu vi esse código no Select2 - Limpando seleções

$('#mySelect').val(null).trigger('change');

Esse código funciona bem com o jQuery, mesmo sem o Select2

Espero que funcione

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

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('');