Prevent Selecting Same Value In Three Different Dropdowns

I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown

Solution 1:

Try This:

HTML

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select3" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

JS

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
}); 

Demo

Solution 2:

See below code

    $(document).ready(function() {
      $("select").on('hover', function () {
            $previousValue = $(this).val();
        }).change(function() {
            $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
            $("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
        });
    });

$("#confirm-form").submit(function(e) {
    e.preventDefault();
    $("select").find("option").removeAttr('disabled');
    document.getElementById('confirm-form').submit();
});

Solution 3:

$(document).ready(function(){  

  $("select").on('focus', function () {
        $("select").find("option[value='"+ $(this).val() + "']").attr('disabled', false);
    }).change(function() {

        $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);

    });


});