3

I've got a group of 16 select boxes in a php mail() form, and I want to disable an option if it's chosen in any other box. The order of options in the select boxes aren't the same, and the I need the value for the php mail. I want the user filling in the form to not be able to choose the same option twice or more.

<select name="box1" id="box1"> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> <select name="box2" id="box2"> <option value="Two">Two</option> <option value="One">One</option> <option value="Three">Three</option> <option value="Life">Life</option> </select> <select name="box3" id="box3"> <option value="Life">Life</option> <option value="One">One</option> <option value="Two">Two</option> </select>

Also, further down the website, I want to do the same with another group of 8 select boxes - and they contain some of the same options, but then I want them all to be choosable from the beginning, until an option from one of them get picked.

I know too little about jQuery and JavaScript. Help?

Improve this question
2
  • so do you want any help on PHP? Don't spam tags Commented May 21, 2016 at 9:50
  • The PHP is working! So, it's just the jQuery and Javascript for getting this disabled option thing. Commented May 21, 2016 at 9:51

2 Answers 2

Reset to default
4

Use .filter to get option-elements having value similar as current value.

$('select').on('change', function() { $('option').prop('disabled', false); //reset all the disabled options on every change event $('select').each(function() { //loop through all the select elements var val = this.value; $('select').not(this).find('option').filter(function() { //filter option elements having value as selected option return this.value === val; }).prop('disabled', true); //disable those option elements }); }).change(); //trihgger change handler initially!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select name="box1" id="box1"> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> <select name="box2" id="box2"> <option value="Two">Two</option> <option value="One">One</option> <option value="Three">Three</option> <option value="Life">Life</option> </select> <select name="box3" id="box3"> <option value="Life">Life</option> <option value="One">One</option> <option value="Two">Two</option> </select>

Fiddle Demo

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for replying! But I don't want to disable the whole select box - I only want make sure that the user can't choose for example "Two" in more than one of the boxes.
1

Thanks, Rayon. I finally got it to work flawlessly with this piece of code:

<script type="text/javascript"> $('select[name*="box1"]').change(function(){ $('select[name*="box1"] option').attr('disabled',false); $('select[name*="box1"]').each(function(){ var $this = $(this); $('select[name*="box1"]').not($this).find('option').each(function(){ if($(this).attr('value') == $this.val()) $(this).attr('disabled',true); }); }); }); </script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.