How do I remove HTML of Array using dropdown list options(Javascript)
Question
I have an array and button which invokes function that pushes the value from text box to the HTML of array. I want to remove the element that I select from the collection of options elements in dropdown list, from HTML of array. Below is the code that I figured out (does not work perfectly).
var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction() { var element = document.getElementById('element').value; fruits.push(element); document.getElementById("demo").innerHTML = fruits; } function Remove(val) { var x = val.options[val.selectedIndex].text; var index = fruits.indexOf(x); fruits.splice(index, 1); document.getElementById("demo").innerHTML = fruits; }
<p id="demo"></p> <input type="text" id="element" name="element"> <input type="submit" onclick="myFunction()" value="Submit"> <form> <select id="mySelect" onchange="Remove(this)"> <option>Banana</option> <option>Orange</option> <option>Apple</option> <option>Mango</option> </select> </form>
2 answers
solution1
0 ACCPTED 2019-02-24 05:48:24
Try the below code.
To add options dynamiclly. Check here to see how options are working.
var fSelect = document.getElementById('mySelect'); fSelect.options[fSelect.options.length] = new Option(element, element);
To remove options just use remove function, pass the index you want to remove
var fSelect = document.getElementById('mySelect'); fSelect.remove(index);
var fruits=["Banana","Orange","Apple","Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction() { var element = document.getElementById('element').value; fruits.push(element); document.getElementById("demo").innerHTML = fruits; //add a new option to select var fSelect = document.getElementById('mySelect'); fSelect.options[fSelect.options.length] = new Option(element, element); } function Remove(val) { var x = val.options[val.selectedIndex].text; var index = fruits.indexOf(x); if(index>=0){ fruits.splice(index, 1); document.getElementById("demo").innerHTML = fruits; //remove element from select var fSelect = document.getElementById('mySelect'); fSelect.remove(index); } }
<p id="demo"></p> <input type="text" id="element" name="element"> <input type="submit" onclick="myFunction()" value="Submit"> <form> <select id="mySelect" onchange="Remove(this)"> <option>Banana</option> <option>Orange</option> <option>Apple</option> <option>Mango</option> </select> </form>
solution2
0 2019-02-24 06:11:36
<html> <body> <p id="demo"></p> <input type="text" id="element" name="element"> <input type="submit" onclick="myFunction()" value="Submit"> <form> <select id="mySelect" onchange="Remove()" size="8"> <option>Banana</option> <option>Orange</option> <option>Apple</option> <option>Mango</option> </select> </form> <br> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction(val) { var x = document.getElementById("mySelect"); fruits.push(document.getElementById("element").value); document.getElementById("demo").innerHTML = fruits; var option = document.createElement("option"); option.text = fruits[fruits.length-1]; x.add(option); } function Remove() { var e = document.getElementById("mySelect"); var strUser = e.options[e.selectedIndex].value; for (var i=0; i<e.length; i++){ if (e.options[i].value == strUser ) e.remove(i); } var index = fruits.indexOf(strUser) fruits.splice(index, 1); document.getElementById("demo").innerHTML = fruits; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.