Create a Select Box , Add and Remove Value on a List Box
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<style> //format and styles
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 200px;
}
fieldset {
width:30%;
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
p{
display: inline-block;
width: 1000px;
}
.btn {
color:white;
display: block;
width: 40%;
border: none;
background-color:blue;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
select {
width: 150px;
}
option {
width: 150px;
}
</style>
</head>
<body>
<div id="container">
<form>
<fieldset>
<label for="name">Add Products :</label> <br>
<input type="text" id="name" placeholder="Enter product" autocomplete="off"><br>
<label for="price">Add Price :</label> <br>
<input type="number" id="price" placeholder="Enter price" autocomplete="off"><br>
<button class="btn" id="btnAdd" size=10 >Add Product </button> <br>
<label for="list">Product List: </label> <br>
<select id="list" name="list" multiple size=10>
<option value="apple">Apple </option>
<option value="Banana">Banana </option>
</select>
<button class="btn" id="btnRemove">Remove Product</button>
<fieldset>
</form>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const selectbox = document.querySelector('#list');
const name = document.querySelector('#name');
//add data in your text box
var prod =
btnAdd.onclick = (e) => {
e.preventDefault();
// validate the option
if (name.value == '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(name.value, name.value);
// add it to the list
selectbox.add(option, undefined);
// reset the value of the input
name.value = '';
name.focus();
};
// remove selected option
btnRemove.onclick = (e) => {
e.preventDefault();
// save the selected option
let selected = [];
for (let i = 0; i < selectbox.options.length; i++) {
selected[i] = selectbox.options[i].selected;
}
// remove all selected option
let index = selectbox.options.length;
while (index--) {
if (selected[index]) {
selectbox.remove(index);
}
}
};
</script>
</body>
</html>
Comments
Post a Comment