Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

How To Select Only Unique Combinations Of Select Dropdowns In Table Row

Post a Comment
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);
	
	functioncallback (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><scriptsrc="https://code.jquery.com/jquery-3.0.0.min.js"integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="crossorigin="anonymous"></script></head><divid="container"><div><selectname="article"><optionvalue="Select">Select</option><optionvalue="Pro Name A">Pro Name A</option><optionvalue="Pro Name B">Pro Name B</option><optionvalue="Pro Name C">Pro Name C</option><optionvalue="Pro Name D">Pro Name D</option></select><selectname="color"><optionvalue="Select">Select</option><optionvalue="Color A">Color A</option><optionvalue="Color B">Color B</option><optionvalue="Color C">Color C</option><optionvalue="Color D">Color D</option></select><selectname="cup"><optionvalue="Select">Select</option><optionvalue="Cup A">Cup A</option><optionvalue="Cup B">Cup B</option><optionvalue="Cup C">Cup C</option><optionvalue="Cup D">Cup D</option></select></div><div><selectname="article"><optionvalue="Select">Select</option><optionvalue="Pro Name A">Pro Name A</option><optionvalue="Pro Name B">Pro Name B</option><optionvalue="Pro Name C">Pro Name C</option><optionvalue="Pro Name D">Pro Name D</option></select><selectname="color"><optionvalue="Select">Select</option><optionvalue="Color A">Color A</option><optionvalue="Color B">Color B</option><optionvalue="Color C">Color C</option><optionvalue="Color D">Color D</option></select><selectname="cup"><optionvalue="Select">Select</option><optionvalue="Cup A">Cup A</option><optionvalue="Cup B">Cup B</option><optionvalue="Cup C">Cup C</option><optionvalue="Cup D">Cup D</option></select></div><div><selectname="article"><optionvalue="Select">Select</option><optionvalue="Pro Name A">Pro Name A</option><optionvalue="Pro Name B">Pro Name B</option><optionvalue="Pro Name C">Pro Name C</option><optionvalue="Pro Name D">Pro Name D</option></select><selectname="color"><optionvalue="Select">Select</option><optionvalue="Color A">Color A</option><optionvalue="Color B">Color B</option><optionvalue="Color C">Color C</option><optionvalue="Color D">Color D</option></select><selectname="cup"><optionvalue="Select">Select</option><optionvalue="Cup A">Cup A</option><optionvalue="Cup B">Cup B</option><optionvalue="Cup C">Cup C</option><optionvalue="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"