Do not allow repeating values in different DropDownList using jQuery?

Question

Do not allow repeating values in different DropDownList using jQuery?

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

I have 3 DropDownList where they have 4 items with the same valor (1,2,3,4). I need to respect that every DropDownList does 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 was able to do with 2 DropDownList like this:

$(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 make any of the ddls get repeated values?

javascript jquery algoritmo

asked by anonymous 17.12.2018 / 20:48

2 answers

2

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

Then you can use the $.inArray() method to disable 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><selectid="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>

18.12.2018 / 10:58

How to create Interface in JavaScript? Creating a dataframe based on two other dataframes using dplyr in R

score 1 · Accepted Answer

You can do a generic function instead of repeating multiple if's. I did the form below that I think resolves (see the comments in the code with some explanation). I also put a CSS property with red background for the disabled options for better 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><selectid="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 "clean" code:

$(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);
      });
   });

});