How to select only Unique combinations of select dropdowns in table row

Question

I am trying to limit the selection of drop-down values inside each table row, so that only one combination is possible. e.g.

If product A has 3 combinations of colors(Green, blue, black) and cups(A,B,C) so there shouldn't be any duplication possible between a combination of these three.

Thus, user shouldn't be able to select Product A, Color:Green, Cup:A twice. But can select Product A, Color:Green, Cup:B.

Here is the screenShot

This example is useful but I am unable to do it the right way [Prevent Multiple Selections of Same Value]

Thanks in advance.

Honestly, I do not see the problem. You only need to use the change events of the drop-down inputs and disable or remove invalid choices from other drop-downs. Do not wanna be rude, but this could be solved by using simple if-else statements. — Kevkong, Jun 29 '16 at 13:11

score 0 · Answer 1 · answered Jun 29 '16 at 19:38

Check the following solution.

$(function () {
 $("[name=article]").change(callback);
 $("[name=color]").change(callback);
 $("[name=cup]").change(callback);
 
 function callback (event) {
  var self = $(this);
  var value = self.val();
  var previousValue = self.data("prev");
  self.data("prev", value);
  
  var selected = $("[name=" + self.attr("name") + "]");
  
  if(value != "Select") {
   var clickedOption = self.find("option[value='" + value + "']");
   
   if(previousValue) {
    selected.find("option[value='" + previousValue + "']:not()").show();
   }
   selected.find("option[value='" + value + "']").hide();
   clickedOption.show();
  } else {
   if(previousValue) {
    selected.find("option[value='" + previousValue + "']:not()").show();
   }
  }
 }
});

<html>
 <head>
  <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
  
 </head>
  <div id="container">
   <div>
    <select name="article">
     <option value="Select">Select</option>
     <option value="Pro Name A">Pro Name A</option>
     <option value="Pro Name B">Pro Name B</option>
     <option value="Pro Name C">Pro Name C</option>
     <option value="Pro Name D">Pro Name D</option>
    </select>
    <select name="color">
     <option value="Select">Select</option>
     <option value="Color A">Color A</option>
     <option value="Color B">Color B</option>
     <option value="Color C">Color C</option>
     <option value="Color D">Color D</option>
    </select>
    <select name="cup">
     <option value="Select">Select</option>
     <option value="Cup A">Cup A</option>
     <option value="Cup B">Cup B</option>
     <option value="Cup C">Cup C</option>
     <option value="Cup D">Cup D</option>
    </select>
   </div>
   <div>
    <select name="article">
     <option value="Select">Select</option>
     <option value="Pro Name A">Pro Name A</option>
     <option value="Pro Name B">Pro Name B</option>
     <option value="Pro Name C">Pro Name C</option>
     <option value="Pro Name D">Pro Name D</option>
    </select>
    <select name="color">
     <option value="Select">Select</option>
     <option value="Color A">Color A</option>
     <option value="Color B">Color B</option>
     <option value="Color C">Color C</option>
     <option value="Color D">Color D</option>
    </select>
    <select name="cup">
     <option value="Select">Select</option>
     <option value="Cup A">Cup A</option>
     <option value="Cup B">Cup B</option>
     <option value="Cup C">Cup C</option>
     <option value="Cup D">Cup D</option>
    </select>
   </div>
   <div>
    <select name="article">
     <option value="Select">Select</option>
     <option value="Pro Name A">Pro Name A</option>
     <option value="Pro Name B">Pro Name B</option>
     <option value="Pro Name C">Pro Name C</option>
     <option value="Pro Name D">Pro Name D</option>
    </select>
    <select name="color">
     <option value="Select">Select</option>
     <option value="Color A">Color A</option>
     <option value="Color B">Color B</option>
     <option value="Color C">Color C</option>
     <option value="Color D">Color D</option>
    </select>
    <select name="cup">
     <option value="Select">Select</option>
     <option value="Cup A">Cup A</option>
     <option value="Cup B">Cup B</option>
     <option value="Cup C">Cup C</option>
     <option value="Cup D">Cup D</option>
    </select>
   </div>
  </div>
 <body>
 </body>
</html>

THank You, but the issue is, that I want Pro Name A to be selected only 4 times since only 4 combinations are possible. Like **Pro Name A--Color A** & **Pro Name A--Color B** & **Pro Name A--Color C** & **Pro Name A--Color D** — Saad Farhan, Jun 30 '16 at 15:31

How to select only Unique combinations of select dropdowns in table row

1 Answers1

Linked