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>