dan32

I have the following html piece and the javascript at the bottom what i need the script to do is when a option from select1 is chosen the same option from select2 and select3 will be removed. The script i have so far is not working, if someone could help me with my problem i would be very grateful. <form action="/proform.php" method="post"> <p>Functionality <select name="select1" id="select1" onchange="changeStuff()"> <option value="" selected disabled>Please select an option...</option> <option id="op1" onselect="remove()">Grad I</option> <option id="op2" >Grad II</option> <option id="op3" >Grad III</option> </select> </p> <p>Appearance <select name="select2" id="select2" onchange="changeStuff()" > <option value="" selected disabled>Please select an option...</option> <option >Grad I</option> <option >Grad II</option> <option >Grad III</option> </select> </p> <p>Load speed <select name="select3" id="select3" onchange="changeStuff()" > <option value="" selected disabled>Please select an option...</option> <option >Grad I</option> <option >Grad II</option> <option >Grad III</option> </select> </p> <script> var select1= document.getElementById('select1'); var select2= document.getElementById('select2'); var select3= document.getElementById('select3'); function changeStuff(){ if (select1.options[1]){ console.log(select2.options[1].remove()); console.log(select3.options[1].remove()); } else if (select1.options[2]){ console.log(select2.options[2].remove()); console.log(select3.options[2].remove()); } else if (select1.options[3]){ console.log(select2.options[3].remove()); console.log(select3.options[3].remove()); } } </script>