I need to delete all my items except Select value from menu id when the user clicks above a dropdown menu, for that I did an event.
This what I tried:
const menu = document.querySelector("#menu");
menu.addEventListener("click", () => {
let sonsLength = menu.length;
for (let i = 0; i < sonsLength; i++) {
if (menu[i].value != "Select") {
menu.removeChild(menu[i]);
sonsLength = sonsLength - 1;
}
}
})<select id="menu">
<option value="Select">Select</option>
<option value="Madrid">Madrid</option>
<option value="Barcelona">Barcelona</option>
<option value="Sevilla">Sevilla</option>
<option value="Bilbao">Bilbao</option>
<option value="Manchester">Manchester</option>
<option value="Paris">Paris</option>
</select>However my loop it doesn't work how I supposed, because the user needs to click several times above the dropdown menu to delete all items except the first one and because of my understanding it should be delete the items when the user clicks once.
Thanks!
I am still not sure if this is what you want to achieve but maybe I am right?
const menu = document.querySelector("#menu");
menu.addEventListener("change", () => {
let sonsLength = menu.length;
for (let i = 0; i < sonsLength;) {
if (menu[i].value != "Select") {
menu.removeChild(menu[i]);
sonsLength = sonsLength - 1;
}
else
i++;
}
})<select id="menu">
<option value="Select">Select</option>
<option value="Madrid">Madrid</option>
<option value="Barcelona">Barcelona</option>
<option value="Sevilla">Sevilla</option>
<option value="Bilbao">Bilbao</option>
<option value="Manchester">Manchester</option>
<option value="Paris">Paris</option>
</select>Answering your question about the else in the for loop:
If you remove an item in an array, all other item indexes move one position forward. E.g.
You have an array
[0, 1, 2]
Now the value 0 is at index 0, the value 1 is at index 1 and the value 2 is at index 2.
When you now remove the first element you get
[1, 2]
So now value 1 is at index 0 and value 2 is at index 1.
For my loop that means, if you remove an element from the array, you must not increment the index (i) because all other elements are moving to the actual index (i). Only if I leave an element I have to increase the index to get to the next element
const menu = document.querySelector("#menu");
menu.addEventListener("change", (event) => {
let selectedValue=event.target.value;
menu.innerHTML=`<option value=${selectedValue}>${selectedValue}</option>`;
})<select id="menu">
<option value="Select">Select</option>
<option value="Madrid">Madrid</option>
<option value="Barcelona">Barcelona</option>
<option value="Sevilla">Sevilla</option>
<option value="Bilbao">Bilbao</option>
<option value="Manchester">Manchester</option>
<option value="Paris">Paris</option>
</select>Changes