How To Select Only Unique Combinations Of Select Dropdowns In Table Row
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,
Solution 1:
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>
Post a Comment for "How To Select Only Unique Combinations Of Select Dropdowns In Table Row"