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