Dynamically Adding select fields and validation

Question

I am adding select fields using javascript & its working fine I want to add valiadation

If user select 8mm in the first select then 8mm will disable in other two select tag.

Here is the JS Code for adding select field

var x = 1; //Initial field counter is 1
var maxField = 6; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = `

    Basic
    


    Quantity (in tons)
    
Remove
`; 



//New input field html

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); //Add field html
        
    }
});

//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

Here is the UI

As you see first two drop-down has same value 10mm means user can select same values. Am looking for simple validation if user select some option then he or she wont select the same value in other dropdown.

Thanks in advance

user_10606400 · Answer

You can loop through selected options using each loop and using this selected value compare it with other options if matches disabled that option from other select-box.

Demo Code :

$(document).on("change", ".basicRate", function() {
  $("select option").attr("disabled", false);//remove disable from all
  //loop through all select box(selected option)
  $(".basicRate option:selected").each(function() {
    var value = $(this).val()
    //loop through all option(not selected option) if you don't want to disable selected option .. else just use `.basicRate option`
    $(".basicRate option:not(:selected)").each(function() {
      if ($(this).val() == value) {
        $(this).attr("disabled", true);
      }
    })
  })
})



  
    Basic
    
    

  
    Quantity (in tons)
    
Remove


  
    Basic
    

  
    Quantity (in tons)
    
Remove


  
    Basic
    

  
    Quantity (in tons)
    
Remove

Dynamically Adding select fields and validation

1 Answers