responsivo - javascript selecionar option select

Como você remove todas as opções de uma caixa de seleção e, em seguida, adiciona uma opção e a seleciona com jQuery? (14)

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

Minha caixa de seleção é a seguinte.

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

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

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

EDIT: tentando obtê-lo para imitar esse código, eu uso o código a seguir sempre que a página / formulário é redefinida. Esta 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 acontece com .selected= "true" . Nada está errado com o 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.

Primeiro desmarque todas as opções existentes e execute a primeira (- Selecione--)

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

Com base na resposta do mauretto, é 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 isto:

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

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

Eu encontrei na net algo como abaixo. Com milhares de opções, como na minha situação, isso é muito mais rápido que .empty() ou .find().remove() do 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 here .

Eu tinha um bug no IE7 (funciona bem no IE6), onde usando os métodos jQuery acima iria limpar a seleção no DOM, mas não na tela. Usando o IE Developer Toolbar eu pude confirmar que o select tinha sido limpo e tinha os novos itens, mas visualmente o select ainda mostrava os itens antigos - mesmo que você não pudesse selecioná-los.

A correção era usar métodos / locais padrão do DOM (como o pôster original tinha) para limpar ao invés de jQuery - ainda usando o jQuery para adicionar opções.

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

Isso substituirá o mySelect existente por um novo mySelect.

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

Não sei exatamente o que você quer dizer com "adicionar um e selecionar", já que ele será selecionado por padrão. 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 "EDIT" : Você pode esclarecer o que você quer dizer com "Esta caixa de seleção é preenchida por um conjunto de botões de opção"? Um elemento <select> não pode (legalmente) conter elementos <input type = "radio">.

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

Se o seu objetivo é remover todas as opções do select, exceto a primeira (normalmente a opção "Please pick a item"), você pode usar:

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

Você pode fazer simplesmente substituindo html

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

porque não basta usar o javascript simples?

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

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

$("#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 encontrou critérios mencionados.

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

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

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