Question

我试图限制每个表格行中下拉值的选择，这样只有一种组合是可能的。 e.g。

如果产品A 具有 3 颜色（绿色，蓝色，黑色）和杯子（A，B，C）的组合）所以这三者的组合之间不应该有任何重复。

因此，用户不应该选择产品A，颜色：绿色，杯子：A 两次。但是可以选择产品A，颜色：绿色，杯子：B 。

这是screenShot

此示例很有用，但我无法以正确的方式执行此操作 [Prevent Multiple Selections of Same Value]

提前致谢。

Answer 1

检查以下解决方案。

$(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>

如何仅选择表格行中选择下拉列表的唯一组合

1 个答案: