Resumo : neste tutorial, você aprenderá como adicionar e remover opções dinamicamente de um elemento selecionado em JavaScript.
O HTMLSelectElement
tipo 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 Option
construtor e add()
o método
Primeiro, use o Option
construtor 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 HTMLSelectElement
elemento:
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 undefined
o 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 HTMLSelectElement
tipo. 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 options
coleçã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.html
O 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 btnAdd
botã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 btnRemove
botã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
HTMLSelectElement
tipo para representar o<select>
elemento. - Use o
add()
método deHTMLSelectElement
para adicionar uma opção ao<select>
elemento. - Use o
remove()
método deHTMLSelectElement
para remover uma opção do<select>
elemento.