Como você remove todas as opções de uma caixa de seleção e depois adiciona uma opção e a seleciona com jQuery?
-
09-06-2019 - |
Pergunta
Usando o jQuery principal, 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>
EDITAR: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 .append
e .val
.)
$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');
EDITAR:Tentando imitar esse código, 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"
.Não há nada de 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";
EDITAR:a resposta selecionada estava próxima 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.
Solução
$('#mySelect')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever')
;
Outras dicas
$('#mySelect')
.empty()
.append('<option selected="selected" value="whatever">text</option>')
;
por que não usar apenas javascript simples?
document.getElementById("selectID").options.length = 0;
Eu tive um bug no IE7 (funciona bem no IE6) onde o uso dos métodos jQuery acima limparia o selecione no DOM, mas não na tela.Usando a barra de ferramentas do desenvolvedor do IE, pude confirmar que o selecione havia sido limpo e tinha os novos itens, mas visualmente o selecione 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 pôster original) para limpar em vez de jQuery - ainda usando jQuery para adicionar opções.
$('#mySelect')[0].options.length = 0;
Se o seu objetivo é remover todas as opções da seleção, exceto a primeira (normalmente a opção 'Escolha um item'), você pode usar:
$('#mySelect').find('option:not(:first)').remove();
Não sei 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ê adicionasse 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"?A <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 parecido com o seguinte, que atende às minhas necessidades.Minha pergunta foi um tanto ambígua.Obrigado por acompanhar.Meu problema final foi resolvido incluindo "selecionado" 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>
Primeiro limpe todas as opções existentes, exceto a primeira (--Select--)
Anexe novos valores de opção usando 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)); }
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>
');
Outra maneira:
$('#select').empty().append($('<option>').text('---------').attr('value',''));
Neste link, existem boas práticas https://api.jquery.com/select/
Encontrei na net algo como abaixo.Com milhares de opções como na minha situação, isso é muito mais rápido do 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 aqui.
Com base na resposta de 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();
Seria melhor se a opção a ser adicionada já existisse.
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
A primeira linha do código removerá todas as opções de uma caixa de seleção, pois nenhum critério de localização de opção foi mencionado.
A segunda linha de código adicionará a Option com o valor especificado("testValue") e Text("TestText").
Usa o jquery suporte() para limpar a opção selecionada
$('#mySelect option:selected').prop('selected', false);
Isso substituirá seu 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 html
$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
Espero que funcione
$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
- salve os valores das opções para serem anexados em um objeto
- limpe as opções existentes na tag select
- iterar o objeto de lista e anexar 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 select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections
$('#mySelect).val(null).trigger('change');
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('');