deleting form option after selection

[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>

[davej]

I have never used this but...

 

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_remove

[es131245]

I alway do such stuff with jquery next() parent() previous() and remove() empty() functions

[dsonesuk]

1) get the value of current select value

2) loop through all options using document.getElementsByTagName('option') and compare with value of current select, IF identical remove

3) BUT! as you loop through option tags compare the option parentNode (select) id (or 'name' attribute is another option) with that of current select id and if identical ignore, else you end up removing your current selections as well.

 

this way you don't worry about referencing each id ref or options that you add in future.