Como adicionar opções para selecionar com JavaScript

No JavaScript, geralmente encontramos um desafio em que precisamos incluir uma lista complexa na qual queremos adicionar ou editar uma opção no caso de atualizações ou alterações nos critérios. Além disso, ter muitas opções e falta de manuseio das categorias pode causar problemas em cenários manuais. Nesses cenários, os métodos JavaScript fornecidos para adicionar novas opções podem resgatá -lo.

Este artigo orientará sobre a adição de opções para selecionar com JavaScript.

Como adicionar/inserir opções para selecionar com JavaScript?

Podemos adicionar opções para selecionar com JavaScript usando três métodos simples:

• ““documento.createElement ()”Método
• ““JQuery" Biblioteca
• ““Opção()”Construtor

Vamos agora passar por cada uma das abordagens mencionadas uma a uma!

Método 1: Adicione opções para selecionar com JavaScript usando o documento.Método CreateElement ()

O "documento.createElement ()”O método cria um nó de elemento. Você também pode utilizar este método para criar uma opção adicional na lista de opções existente. Essa funcionalidade será alcançada incluindo um botão que adicionará a opção especificada à lista quando clicado.

Para adicionar opções para selecionar com JavaScript usando o documento.Método CreateElement (), você deve seguir a sintaxe abaixo do rumo.

Sintaxe

documento.CreateElement (tipo)

Aqui, "tipo”Refere -se ao tipo de elemento que precisa ser criado.

Veja o exemplo a seguir para entender o conceito declarado.

Exemplo
No exemplo abaixo, atribuiremos um ID específico, “addOptions"E o tamanho"3”, Que se refere ao tamanho do contêiner em que três opções são colocadas. Agora, atribuiremos os valores das opções chamadas “Pitão" e "Java”. Depois disso, adicione um botão com um “ONCLICKEvento. Funcionará de tal maneira que, quando o botão for pressionado, a função “addOptions ()”Será acionado:

Pitão
Java

Adicione nova opção

Na próxima etapa, definiremos a função “addOptions ()”E acesse o ID especificado de seleção usando o“documento.getElementById ()”Método. Depois disso, criaremos um “opção”Elemento para adicionar um novo valor na lista de opções.

Por fim, atribuiremos um valor “JavaScript”Para a opção específica e adicione -a à lista de opções usando o“adicionar()”Método:

A saída da implementação acima resultará da seguinte maneira:

Método 2: Adicione opções para selecionar com JavaScript usando jQuery

““JQuery”É uma biblioteca JavaScript essencial que simplifica a programação do JavaScript. Você pode utilizar seu “acrescentar()”Método para adicionar uma opção e atribuir um valor específico a essa opção específica.

Vamos passar pelo exemplo seguinte para demonstração.

Exemplo
No mesmo arquivo HTML, agora incluiremos uma biblioteca jQuery dentro do HTML “" marcação:

Em seguida, aplicaremos as funcionalidades para adicionar uma opção na lista de opções em uma função chamada “addOptions ()”. Aqui, acessaremos o ID de selecionar usando “#AdDoptions”, Adicione uma nova opção usando“acrescentar()”Método com a ajuda do“val ()" e "texto()" métodos:

A saída resultante será:

Método 3: Adicione opções para selecionar com JavaScript usando o Option () Constructor

O "Opção()”O construtor cria um novo“HtmloptionElement”. Pode ser utilizado para adicionar um novo slot para uma opção adicional chamada “JavaScript”.

Para adicionar opções para selecionar com JavaScript usando o método Option () Constructor, você deve seguir a sintaxe abaixo sedida.

Sintaxe

nova opção (texto, valor)

Aqui, "texto”Representa o conteúdo do elemento e“valor”Refere -se ao valor do htmloptionElement

Exemplo
Agora vamos utilizar o “addOptions ()”Função para obter o ID selecionado com a ajuda do“documento.getElementById ()”Método. Então, chame o “Opção()”Construtor e coloque o valor da opção“JavaScript" iniciar. Depois disso, o “ApndendChild ()”Método anexará o valor da opção especificado ao final da lista:

Saída

Fornecemos métodos mais simples para adicionar opções para selecionar com JavaScript.

Conclusão

Para adicionar opções para selecionar com JavaScript, você pode usar o “documento.createElement ()”Método para criar um elemento de opção e incluir o valor da opção especificado ou o“JQueryBiblioteca ou a “Opção()”Método construtor para adicionar um novo slot para uma opção adicional e anexar seu valor na lista de opções. Este artigo o guiou sobre a adição de opções para selecionar com JavaScript.