Question

prevent duplicate in select box in table

Forms

Updated February 7, 2019

asked on February 4, 2019

I have a table with class "tbl1", This table contains drop down menu column with class empID

Now I want to check for each row to prevent selecting the same option more than one time and alert user that this option already selected before if he selected.

here what i tried but it is not working:

$(document).ready(function(){

perventDuplicate ();
$('.tbl1').on('change', '.EmpID select', perventDuplicate);
function perventDuplicate() {
$('.tbl1 tbody tr').each(function () {
$(this).find('.empID select').each(function () {
if( $(this).find('option[value='+$(this).val()+']:selected').length>1){
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
};

});

0 0

Replies

replied on February 5, 2019

Check out the code I put on this post. Swap out the checkbox field with your drop down options.

Basically, you want to build an array of all the values currently in the column. If the new value is in the array, then 'do something' such as validate it to throw an error message. Let me know if you need a hand.

Good luck,

Chris

0 0

View 5 previous replies

replied on February 5, 2019

Hi Chris

Thank you so much for the response.

I edit your code regarding to my table as follwing:

$('.tbl3').on('click', '.tbl3EmpID', function(){

var totalRows = $(this).find('tr').length;
var allValues = [];

for (var r=1; r<totalRows; r++){
var empIDCheck = $(this).find('td:nth-child(1)').closest('tr:nth-child('+r+')').find('td select').is(':selected');
allValues.push(pCardVal);

if ($.inArray(true, allValues) > -1){
//if value is true, do stuff
stuff();

}//end for each row
});

But unfortunately not working, I need to alert if user select the same empID again and alert that empID already selected before.

Thank you for your help.

0 0

replied on February 5, 2019

A few tweaks needed:

$('.tbl3').on('click', '.tbl3EmpID', function(){

 var totalRows = $(this).find('tr').length;
      var allValues = [];
         
    for (var r=1; r<totalRows; r++){
         var empIDCheck = $(this).find('td:nth-child(1)').closest('tr:nth-child('+r+')').find('td select').is(':selected');
         allValues.push(empIDCheck);

    if ($.inArray(empIDCheck, allValues)){ //if empIDCheck is in allValues
       alert("This name has already been selected once");

    }//end for each row
});

Try that.

0 0

replied on February 5, 2019

I try the code but unfortunately not working again, I check each row in code i find problem from this row:

var empIDCheck = $(this).find('td:nth-child(1)').closest('tr:nth-child('+r+')').find('td select').is(':selected');

but i don't know how to fix it.

0 0

replied on February 5, 2019

Note: I have more than one select column in table, I don't know if that will effect or no.

0 0

replied on February 5, 2019

Ok, I see it now. A couple things. You need to set the "1" to whatever number column the EmpID is. Also, lets just get the value from the field. See if that does it.

var empIDCheck = $(this).find('td:nth-child(1)').closest('tr:nth-child('+r+')').val();

0 0

replied on February 5, 2019

also not working :(

here I attach two pics for my code and preview, when i try to select from empID Column alert come without selecting, only when focus to select field.

0 0

replied on February 5, 2019

Looks like the filter could be the issue.

What happens when you add in the 'option' to the filter?

$('.tbl3').on('click', '.tbl3EmpID option', function(){

this tells it only to run when an option is clicked.

You could also try:

$('.tbl3').on('click', '.tbl3EmpID:selected', function(){

0 0

replied on February 5, 2019

Also still not working, while i search now i find this post but i can not handle the code to my case. if it help me

https://answers.laserfiche.com/questions/81032/How-to-prevent-multiple-selections-of-the-same-value-in-a-dropdown-in-a-table#84663

0 0

replied on February 7, 2019 • Show version history

@████████, I duplicated your table and have a solution:

$(document).ready(function(){

  var checkEmpIDs = function(thisVal, thisRow){
    var totalRows = $('.tbl3 tr').length;
    var allValues = [];
    
    for (var r=1; r<totalRows; r++){
         var empIDCheck = $('.tbl3 td:nth-child(4)').closest('tr:nth-child('+r+')').find('td select').val();

      if(empIDCheck != '' && r-1!=thisRow){   
      allValues.push(empIDCheck);
      }
    }//end for 
   
      if ($.inArray(thisVal, allValues)>=0){ //if thisVal is in allValues
	       alert("This name has already been selected once");
	  }//if inArray 
       
  };//end chekEmpIDs

  $('.tbl3 tbody').on('change', 'select', function(){
	  var thisVal = $(this).val();
         var thisRow = $(this).closest('tr').index();
         checkEmpIDs(thisVal, thisRow);
   });//on change to dropDown
  
});//document ready

Make sure that .tbl3 is the class assigned to your table. If this answered your question, please be sure to click that button below.

Thanks,

Chris

0 0

You are not allowed to follow up in this post.

Question

Question

prevent duplicate in select box in table

Replies

Sign in to reply to this post.