Do not allow repeating values in different dropdownlists using jQuery?

Question

I have 3 DropDownList where they have 4 items with the same valor (1,2,3,4). I need to respect each DropDownList do not repeat the value selected in the others.

Example:

ddl0= 1 
ddl1= 2 (não permitiria escolher os valores 1 e 3)
ddl2= 3 (não permitiria escolher os valores 1 e 2)

*ddl= DropDownList

I managed to do with 2 Dropdownlist this way:

$(document).ready(function () {
$("#ddl0").on('change', function () {
  if ($(this).val() == '1') {
    $("#ddl1 option[value='1']").prop("disabled", true);
    $("#ddl1 option[value='2']").prop("disabled", false);
    $("#ddl1 option[value='3']").prop("disabled", false);
    $("#ddl1 option[value='4']").prop("disabled", false);

 } else if ($(this).val() == '2') {
    $("#ddl1 option[value='1']").prop("disabled", false);
    $("#ddl1 option[value='2']").prop("disabled", true);
    $("#ddl1 option[value='3']").prop("disabled", false);
    $("#ddl1 option[value='4']").prop("disabled", false);

 } else if ($(this).val() == '3') {
    $("#ddl1 option[value='1']").prop("disabled", false);
    $("#ddl1 option[value='2']").prop("disabled", false);
    $("#ddl1 option[value='3']").prop("disabled", true);
    $("#ddl1 option[value='4']").prop("disabled", false);

 } else if ($(this).val() == '4') {
    $("#ddl1 option[value='1']").prop("disabled", false);
    $("#ddl1 option[value='2']").prop("disabled", false);
    $("#ddl1 option[value='3']").prop("disabled", false);
    $("#ddl1 option[value='4']").prop("disabled", true);

    }
   });
 });

now entering with a third Dropdownlist. How could I do for any of the ddls to get repeat values?

Answer 1

Each time the event occurs change of a select, you create a Array with all values that have already been marked.

Then you can use the method $.inArray() to disable the options whose values are in this Array.

$(document).ready(function() {
  let s = $('select[id^=ddl]'), o = s.children();    
  s.change(function() {        
    let valores = [];    
    s.find('option[value]:selected').each(function() { valores.push($(this).val()); });        
    $(o).each(function() {
      $(this).prop('disabled', $.inArray(this.value, valores) !== -1);      
    });    
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddl0">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

<select id="ddl1">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

<select id="ddl2">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

Answer 2

You can do a generic function instead of repeating multiple if’s. I did it the way below that I think it solves (see the comments in the code with some explanations). I also put a CSS property with red background for disabled options for best illustration in the example:

$(document).ready(function(){
   
   // seleciona todos os ddls que começam com o id "ddl"
   var ddls = $("[id^=ddl]");

   ddls.on("change", function(){
      
      // declara a array
      var slots = [];
      
      // busca option selecionado nas ddls
      var opts = ddls.find("option:selected");

      // laço para alimentar a array com os values selecionados
      opts.each(function(){

         var v = $(this).attr("value");

         // só inclui na array values com algum valor
         if(v) slots.push(v);

      });
      
      // redefino a variável opts, agora com todos os options
      opts = ddls.find("option");
      opts.each(function(){

         var t = $(this);
         
         // desabilita o option se o seu value estiver na array e não esteja selecionado
         t.prop("disabled", ~slots.indexOf(t.attr("value")) && !t.is(":selected") ? true : false);

      });

   });
   
});

option:disabled{
   background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddl0">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

<select id="ddl1">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

<select id="ddl2">
   <option>...</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

Below the code "clean":

$(document).ready(function(){

   var ddls = $("[id^=ddl]");
   ddls.on("change", function(){
      var slots = [];
      var opts = ddls.find("option:selected");
      opts.each(function(){
         var v = $(this).attr("value");
         if(v) slots.push(v);
      });
      opts = ddls.find("option");
      opts.each(function(){
         var t = $(this);
         t.prop("disabled", ~slots.indexOf(t.attr("value")) && !t.is(":selected") ? true : false);
      });
   });

});