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?

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?

• javascript
• jquery
• html
• select

Share Improve this question Follow edited Oct 4, 2017 at 17:45 M0nst3R 5,30311 gold badge2828 silver badges3838 bronze badges asked May 21, 2016 at 9:49 soulitudesoulitude 12111 gold badge22 silver badges1212 bronze badges 2

• so do you want any help on PHP? Don't spam tags – Thamilhan 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. – soulitude Commented May 21, 2016 at 9:51

Add a ment  | 

2 Answers 2

Sorted by: 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./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

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>