Disable Select Option dependent on another Select Box

Question

I have three select boxes, that the user would choose in terms of priority. I have used sport for this example. At present I've set the css to hide the 2nd and 3rd priority selects until the first box has been completed and so on.

The issue I have is that as the values are all duplicate, i'd like to disable selection, IE. If a user selects "Golf", then this should be disabled in priority2, and priority3. In addition if a user selects "Football" for priority2 then both "Golf" and "Football" should be disabled.

HTML:

    <form>

<table>
<tr><td>
<label for="Priority">Please state your priorities</label></td><td>1st PRIORITY
<select class="formSelect" name="priority1" onChange="p1(priority1);" onClick="p1(priority1);" width="175px" id="priority1" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>

<td>2nd PRIORITY
<select name="priority2" class="chidden" onChange="p2(priority2);" onClick="p2(priority2);" width="175px" id="priority2" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>

<td>3rd PRIORITY
<select name="priority3" class="chidden" width="175px" id="priority3" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>


</tr>


</table></form>

CSS:

.chidden {visibility: hidden;}
.cvisible {visibility: visible;}

Javascript:

var priority1 = document.getElementById("priority1");
var priority2 = document.getElementById("priority2");
var priority3 = document.getElementById("priority3");

function p1(priority1) {

if(document.getElementById("priority1").selectedIndex > 0){  

      document.getElementById("priority2").className="cvisible";


  }
 else{
document.getElementById("priority2").className="chidden";
 document.getElementById("priority2")[0].selected = "1";
 document.getElementById("priority3").className="chidden";
 document.getElementById("priority3")[0].selected = "1";
 }
}

function p2(priority2) {

if(document.getElementById("priority2").selectedIndex > 0){  

      document.getElementById("priority3").className="cvisible";
  }
 else{
document.getElementById("priority3").className="chidden";
 document.getElementById("priority3")[0].selected = "1";
 }
}

Apologies for the quality of code, its only a start at the moment. I have tried to use the following to disable selection but not sure how to implement it. I would be grateful for any help with this (in Javascript);

        //for (var i=0; i< document.getElementById("priority2").length; i++){

        //if(document.getElementById("priority1").selectedIndex == document.getElementById("priority2")[i]){
         //   document.getElementById("priority2")[i].disabled = true;
//}     
      //}

Answer 1

If you have the all select boxes with same class name and calling a function onchange=sel_box(this.value) you can use following

$('.chidden option[value="'+opt+'"]').attr("disabled", true);

here opt is option that you passed to sel_box() function

Answer 2

I don't think you can set options as visible/hidden in css, but you can disable them.

See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled

EDIT

100% wasn't questioning that. Was only concerned about your method of hiding/showing.

This should do what you're looking for http://jsfiddle.net/RaBuQ/1/

Actually just realized there is a bug. See if you can get it. If not I'll update in a bit.

EDIT 2

This should get you what you need. http://jsfiddle.net/RaBuQ/5/

EDIT 3

This isn't pure javascript (still jQuery), but I wanted the answer to be complete to your spec. If I have time, I may re-visit with a pure javascript answer, but don't wait for me. If you get it working, make sure you post the answer to your own question. Good luck!

http://jsfiddle.net/RaBuQ/8/