Este tutorial definirá o procedimento para adicionar uma opção de um texto de entrada a uma tag de seleção usando JavaScript.
Como adicionar a opção de selecionar a tag do texto de entrada usando JavaScript?
Para adicionar uma opção de um texto de entrada a uma tag de seleção usando JavaScript, você pode usar métodos diferentes, como:
Vamos explorar cada método um por um!
Método 1: Adicionar opção para selecionar a marca do texto de entrada usando o método add() com construtor de opções
Para adicionar uma opção do texto de entrada em uma tag de seleção, use o “ adicionar() ” método com “ Opção ” Construtor. O método add() é usado para adicionar os elementos às opções do “ HTMLSelectElement ” também conhecido como tag
Sintaxe
Siga a sintaxe fornecida para usar o método add() para adicionar uma opção em uma tag select:
adicionar ( opção, existenteOption ) ;Aqui o ' opção ” representa a nova opção que será adicionada no lugar do “ Opção existente ”.
Exemplo
Vamos criar um campo de entrada, um menu drop-down usando
< selecionar id = 'opções' >
< valor da opção = 'c' > C opção >
selecionar >
< br >< br >
< ID do botão = 'adicionar bt' ao clicar = 'InsertOption()' > Adicionar opção botão >
No arquivo JS, defina uma função chamada “ insertOption() ” e, em seguida, acesse o botão, a caixa de texto e o elemento select com seus IDs atribuídos usando o “ querySelector() ” método. Em seguida, crie uma instância da opção usando o construtor Option e chame o método add() passando a opção existente e a nova opção que precisa ser adicionada no final da lista:
functioninsertOption ( ){
const addBtn = documento. seletor de consulta ( '#addbtn' ) ;
const caixa de listagem = documento. seletor de consulta ( '#opções' ) ;
const suspenso = documento. seletor de consulta ( '#TXT' ) ;
const opção = novo Opção ( suspenso. valor , suspenso. valor ) ;
caixa de listagem. adicionar ( opção, indefinido ) ;
suspenso. valor = '' ;
suspenso. foco ( ) ;
}
A saída mostra que a nova opção do campo de texto é adicionada no final do menu suspenso:
Observação: Você pode usar este método para adicionar a opção no início da tag select adicionando o valor da opção existente como um segundo parâmetro em vez de indefinido. Ele adicionará a nova opção antes da existente.
Vamos para o outro método!
Método 2: Adicionar opção para selecionar a marca do texto de entrada usando createElement() com método appendChild()
Há outra abordagem usando a qual você pode criar um novo elemento usando o “ criarElemento() ” método com o “ appendChild() ” método. Usando essa metodologia, adicionaremos as opções no início da tag de seleção.
Sintaxe
Use a seguinte sintaxe para adicionar a opção na tag select do texto de entrada usando o método appendChild():
appendChild ( newOptionValue ) ;Exemplo
Aqui, vamos criar uma lista suspensa adicionando duas opções “ C ' e ' C++ ”, um campo de entrada e um botão que chamará a função JavaScript definida pelo usuário chamada “ insertOption() ” quando seu evento onclick é acionado:
< tipo de entrada = 'texto' Eu iria = 'TXT' marcador de posição = 'Digite o texto para adicionar a opção' >< selecionar id = 'suspenso' >
< opção > C opção >
< opção > C ++ opção >
selecionar >
< br >< br >
< botão ao clicar = 'insertOption();' > Adicionar opção botão >
Em uma função chamada “ insertOption() ”, primeiro acesse o elemento select e o campo de texto usando seus ids atribuídos e, em seguida, chame os métodos createElement() e createTextNode() para criar uma instância de opção e buscar o valor de texto como uma opção. Depois disso, chame o método appendChild() e passe o valor do texto como uma opção, em seguida, adicione esta opção no início da lista de seleção usando “ inserirAntes() ” com o elemento select:
functioninsertOption ( ){
var selecionar = documento. getElementById ( 'suspenso' ) ,
textValue = documento. getElementById ( 'TXT' ) . valor ,
novaOpção = documento. createElement ( 'Opção' ) ,
newOptionValue = documento. createTextNode ( textValue ) ;
novaOpção. appendChild ( newOptionValue ) ;
selecione. inserirAntes ( novaOpção, selecione. primeiro filho ) ;
}
Como você pode ver, a saída mostra que a nova opção do campo de texto é adicionada no início do menu suspenso:
Compilamos todas as soluções possíveis para adicionar opções de um texto de entrada à tag de seleção.
Conclusão
Para adicionar uma opção de um texto de entrada a uma tag de seleção usando JavaScript, você pode usar os métodos internos do JavaScript, incluindo o método add() ou o método appendChild(). Você pode adicionar opções em uma marca de seleção no início da lista, bem como no final da lista. Neste tutorial, definimos o procedimento para adicionar uma opção de um texto de entrada a uma tag de seleção usando JavaScript com exemplos detalhados.