Qual é a maneira mais fácil de adicionar um option
a um menu suspenso usando jQuery?
Isso vai funcionar?
$("#mySelect").append('<option value=1>My option</option>');
javascript
jquery
Click Voto a favor
fonte
fonte
$("#mySelect").html(....)
para substituir as opções atuais pelas novas.Respostas:
Isso NÃO funcionou no IE8 (ainda funcionou no FF):
Este trabalho DID:
fonte
display: table;
é aplicado como estilo ao elemento de seleção. Isso irá quebrar o código jsvar o = new Option('option text', 'value'); o.innerHTML = 'option text'; document.getElementById('selectList').appendChild(o);
Pessoalmente, prefiro esta sintaxe para anexar opções:
Se você estiver adicionando opções de uma coleção de itens, poderá fazer o seguinte:
fonte
items={option1:{value:1,text:1},option2:{value:2,text:2}}
Você pode adicionar a opção usando a seguinte sintaxe. Também pode visitar a opção de manipulação de maneira no jQuery para obter mais detalhes.
fonte
value
vez deval
). O código correto deve ser$('select').append('<option value="1">One</option>');
Se o nome ou o valor da opção for dinâmico, você não precisará se preocupar com o escape de caracteres especiais; nisso, você pode preferir métodos DOM simples:
fonte
Opção 1-
Você pode tentar isso-
Como isso-
Opção 2-
Ou tente isso-
Como isso-
fonte
Isto é muito simples:
ou
fonte
Isso funciona bem.
Se você adicionar mais de um elemento de opção, recomendo executar o acréscimo uma vez, em vez de um acréscimo em cada elemento.
fonte
por qualquer motivo,
$("#myselect").append(new Option("text", "text"));
não está funcionando para mim no IE7 +Eu tive que usar
$("#myselect").html("<option value='text'>text</option>");
fonte
Para ajudar no desempenho, você deve tentar alterar o DOM apenas uma vez, ainda mais se estiver adicionando muitas opções.
fonte
string.join()
para concatenar cadeiasfonte
selectmenu()
não faz parte do núcleo do jQuery e é um widget do jQueryUI . Isso a torna uma solução bastante pesada, não?Eu gosto de usar a abordagem não jquery:
fonte
Você pode adicionar opções dinamicamente ao menu suspenso, como mostrado no exemplo abaixo. Aqui neste exemplo, peguei os dados da matriz e vinculei esses valores à lista suspensa, como mostrado na captura de tela de saída
Resultado:
fonte
Não mencionado em nenhuma resposta, mas útil é o caso em que você deseja que essa opção também seja selecionada, você pode adicionar:
fonte
fonte
Existem duas maneiras. Você pode usar um desses dois.
Primeiro:
Segundo:
fonte
Se você deseja inserir a nova opção em um índice específico na seleção:
Isso inserirá o "Novo item" como o terceiro item na seleção.
fonte
Você pode anexar e definir o atributo Value com o texto:
fonte
Encontramos algum problema quando você anexa a opção e usa o jquery validate. Você deve clicar em um item na lista de seleção múltipla. Você adicionará este código para lidar com:
fonte
fonte
Este é apenas um ponto rápido para obter o melhor desempenho
sempre que estiver lidando com muitas opções, construa uma grande string e adicione-a ao 'select' para obter o melhor desempenho
fg
var $ mySelect = $ ('# mySelect'); var str = '';
Ainda mais rápido
fonte
Se você estiver obtendo dados de algum objeto, basta encaminhar esse objeto para funcionar ...
Nome e ID são nomes de propriedades do objeto ... para que você possa chamá-los como quiser ... E, claro, se você tiver Array ... deseja criar uma função personalizada com o loop for ... e depois chamar essa função em documento pronto ... Felicidades
fonte
Com base na resposta do dule para anexar uma coleção de itens, um one-liner
for...in
também fará maravilhas:Valores e índices de objetos são atribuídos às opções. Esta solução funciona mesmo no jQuery antigo (v1.4) !
fonte
se você tiver optgroup dentro de select , obteve um erro no DOM.
Eu acho que a melhor maneira:
fonte
Você pode tentar o código abaixo para anexar à opção
fonte
fonte
Foi assim que eu fiz, com um botão para adicionar cada tag de seleção.
fonte
$(document).ready(function(){ $("#button").click(function() { $('#id_table_AddTransactions').append('<option></option>'); }); });
Você pode fazer isso no ES6:
fonte
Se alguém vier aqui procurando uma maneira de adicionar opções com propriedades de dados
Usando attr
Usando dados - versão adicionada 1.2.3
fonte