Resumo : neste tutorial, você aprenderá como adicionar e remover opções dinamicamente de um elemento selecionado em JavaScript.
O HTMLSelectElementtipo representa o <select>elemento. Possui o add()método que adiciona dinamicamente uma opção ao <select>elemento e o remove()método que remove uma opção do <select>elemento:
add(option,existingOption)– adiciona um novo<option>elemento antes de<select>uma opção existente.remove(index)– remove uma opção especificada pelo índice de um arquivo<select>.
Adicionando opções
Para adicionar uma opção dinamicamente a um <select>elemento, siga estas etapas:
- Primeiro, crie uma nova opção.
- Segundo, adicione a opção ao elemento select.
Existem várias maneiras de criar uma opção dinamicamente e adicioná-la <select>em JavaScript.
1) Usando o Optionconstrutor e add()o método
Primeiro, use o Optionconstrutor para criar uma nova opção com o texto e o valor da opção especificados:
let newOption = new Option('Option Text','Option Value');Linguagem de código: JavaScript ( javascript )Em seguida, chame o add()método do HTMLSelectElementelemento:
const select = document.querySelector('select');
select.add(newOption,undefined);Linguagem de código: JavaScript ( javascript )O add()método aceita dois argumentos. O primeiro argumento é a nova opção e o segundo é uma opção existente.
Neste exemplo, passamos undefinedo segundo argumento, o método método add()adicionará a nova opção ao final da lista de opções.
2) Usando os métodos DOM
Primeiro, construa uma nova opção usando métodos DOM:
// create option using DOM
const newOption = document.createElement('option');
const optionText = document.createTextNode('Option Text');
// set option text
newOption.appendChild(optionText);
// and option value
newOption.setAttribute('value','Option Value');Linguagem de código: JavaScript ( javascript )Segundo, adicione a nova opção ao elemento select usando o appendChild()método:
const select = document.querySelector('select');
select.appendChild(newOption);Linguagem de código: JavaScript ( javascript )Removendo opções
Existem também várias maneiras de remover opções dinamicamente de um elemento selecionado.
A primeira maneira é usar o remove()método do HTMLSelectElementtipo. O seguinte ilustra como remover a primeira opção:
select.remove(0); Linguagem de código: CSS ( css )A segunda maneira de remover uma opção é referenciá-la pelo seu índice usando a optionscoleção e definir seu valor como null:
select.options[0] = null;Linguagem de código: JavaScript ( javascript )A terceira maneira é usar o removeChild()método e remover uma opção especificada. O código a seguir remove o primeiro elemento de a selectBox:
// remove the first element:
select.removeChild(selectBox.options[0]);Linguagem de código: JavaScript ( javascript )Para remover todas as opções de um elemento select, você usa o seguinte código:
function removeAll(selectBox) {
while (selectBox.options.length > 0) {
select.remove(0);
}
}Linguagem de código: JavaScript ( javascript )Quando você remove a primeira opção, o elemento select move outra opção como a primeira opção. A removeAll()função remove repetidamente a primeira opção no elemento select, portanto, remove todas as opções.
Junte tudo
Construiremos um aplicativo que permite aos usuários adicionar uma nova opção a partir do valor de um texto de entrada e remover uma ou mais opções selecionadas.
Esta é a estrutura do projeto:
├── css
| └── style.css
├── js
| └── app.js
└── index.htmlO index.html:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form>
<label for="framework">Framework:</label>
<input type="text" id="framework" placeholder="Enter a framework" autocomplete="off">
<button id="btnAdd">Add</button>
<label for="list">Framework List:</label>
<select id="list" name="list" multiple>
</select>
<button id="btnRemove">Remove Selected Framework</button>
</form>
</div>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )js/app.js
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const listbox = document.querySelector('#list');
const framework = document.querySelector('#framework');
btnAdd.onclick = (e) => {
e.preventDefault();
// validate the option
if (framework.value == '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(framework.value, framework.value);
// add it to the list
listbox.add(option, undefined);
// reset the value of the input
framework.value = '';
framework.focus();
};
// remove selected option
btnRemove.onclick = (e) => {
e.preventDefault();
// save the selected options
let selected = [];
for (let i = 0; i < listbox.options.length; i++) {
selected[i] = listbox.options[i].selected;
}
// remove all selected option
let index = listbox.options.length;
while (index--) {
if (selected[index]) {
listbox.remove(index);
}
}
};
Linguagem de código: JavaScript ( javascript )O estilo pode ser encontrado aqui .
Como funciona:
Primeiro, use o querySelector()método para selecionar elementos, incluindo texto de entrada, botão e caixa de seleção:
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const listbox = document.querySelector('#list');
const framework = document.querySelector('#framework');Linguagem de código: JavaScript ( javascript )Segundo, anexe o ouvinte de evento click ao btnAddbotão.
Caso o valor do texto de entrada esteja em branco, mostramos um alerta para informar aos usuários que o nome é obrigatório. Caso contrário, criamos uma nova opção e a adicionamos à caixa de seleção. Após adicionar a opção, redefinimos o texto inserido do texto de entrada e colocamos o foco nele.
btnAdd.addEventListener('click', (e) => {
e.preventDefault();
// validate the option
if (framework.value.trim() === '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(framework.value, framework.value);
// add it to the list
listbox.add(option, undefined);
// reset the value of the input
framework.value = '';
framework.focus();
});Linguagem de código: JavaScript ( javascript )Terceiro, registre um ouvinte de evento de clique no btnRemovebotão. No ouvinte de evento, salvamos as opções selecionadas em um array e removemos cada uma delas.
btnRemove.addEventListener('click', (e) => {
e.preventDefault();
// save the selected options
let selected = [];
for (let i = 0; i < listbox.options.length; i++) {
selected[i] = listbox.options[i].selected;
}
// remove all selected option
let index = listbox.options.length;
while (index--) {
if (selected[index]) {
listbox.remove(index);
}
}
});Linguagem de código: JavaScript ( javascript )Resumo
- JavaScript usa o
HTMLSelectElementtipo para representar o<select>elemento. - Use o
add()método deHTMLSelectElementpara adicionar uma opção ao<select>elemento. - Use o
remove()método deHTMLSelectElementpara remover uma opção do<select>elemento.
