Como adicionar a opção para selecionar Tag no texto de entrada usando JavaScript

Ao desenvolver um site, pode haver um requisito para adicionar novas opções ao elemento selecionado dinamicamente, o que se torna desafiador para iniciantes. Em tal situação, você pode utilizar diferentes métodos JavaScript com o objetivo de adicionar opções à tag Selecionar no texto de entrada adicionado. Não sei como?

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 para selecionar Tag no 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:

• Add () Método com o construtor de opções
• Método CreateElement () com AppendChild () Método

Vamos explorar cada método um por um!

Método 1: Adicionar opção para selecionar tag no texto de entrada usando o método add () com o 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. São necessários dois parâmetros como argumentos.

Sintaxe

Siga a sintaxe fornecida para usar o método Add () para adicionar uma opção em uma tag Selecionar:

add (opção, cutção existente);

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 suspenso usando tag e um botão que adicionarão novas opções em um elemento selecionado, invocando o “insertoção ()”Função quando é clicado:

C




Adicionar opção

No arquivo JS, defina uma função chamada “insertoção ()”E depois acesse o botão, a caixa de texto e o elemento de seleção com os IDs atribuídos usando o“QuerySelector ()”Método. Em seguida, crie uma instância da opção usando o construtor da opção e ligue para 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.QuerySelector ('#addBtn');
const listbox = documento.QuerySelector ('#opções');
const suspenso = documento.QuerySelector ('#txt');
const opção = nova opção (suspensão.valor, suspensão.valor);
ListBox.add (opção, indefinida);
suspenso.value = ";
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 esse método para adicionar a opção no início da tag de seleção 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 mudar para o outro método!

Método 2: Adicionar a opção para selecionar Tag no texto de entrada usando CreateElement () com o método AppendChild ()

Existe outra abordagem usando que você pode criar um novo elemento usando o “createElement ()”Método com o“ApndendChild ()”Método. Ao usar esta metodologia, adicionaremos as opções no início da tag de seleção.

Sintaxe

Use a seguinte sintaxe para adicionar opção na tag Selecionar no texto de entrada usando o método appendChild ():

ApndendChild (NewOptionValue);

Exemplo

Aqui, criaremos 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“insertoção ()”Quando seu evento OnClick é acionado:

C
C++




Adicionar opção

Em uma função chamada “insertoção ()”, Primeiro acesse o elemento de seleção e o campo de texto usando seus métodos de IDs atribuídos e, em seguida, ligue para os métodos CreateElement () e CreateTextNode () para criar uma instância de opção e buscar o valor do texto como uma opção. Depois disso, ligue para o método AppendChild () e passe o valor do texto como uma opção, adicione esta opção no início da lista de selecionar usando “insertBefore ()”Método com elemento selecionado:

functionInsERTOption ()

var select = documento.getElementById ("suspenso"),
textValue = documento.getElementById ("txt").valor,
newOption = Document.CreateElement ("Opção"),
newOptionValue = documento.CreateTextNode (textValue);
NewOption.ApndendChild (NewOptionValue);
Selecione.Inserir antes (NewOption, 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 Selecionar.

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 JavaScript, incluindo o método add () ou appendChild (). Você pode adicionar opções em uma tag 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.