javascript - 使用jquery过滤下拉列表中的多个值

Question

我正在做一些需要确保下拉值不能在少数下拉列表中重复的事情。
这意味着一旦选择了该值，就不应再次出现在其余下拉列表中< br/>
现在我面临的问题是，当我单击第一个下拉菜单时，第二个下拉菜单中的值不会出现(这就是我想要的)，它看起来不错并且运行良好。但是当我选择第二个下拉菜单时，第三个下拉菜单将显示我在其下拉菜单中选择的值(这不是我想要的)。

$('#ext1').on('change', function () {
	if ($(this).data('options') == undefined) {
		$(this).data('options', $('#ext2 option').clone());
	}
	var val = $(this).val();
	var options = $(this).data('options').filter('[value!=\"' + val + '\"]');
	$('#ext2').html(options);
	$('#ext2').val('0');
});

$('#ext2').on('change', function () {
	if ($(this).data('options') == undefined) {
		$(this).data('options', $('#ext3 option').clone());
	}
	var val = $(this).val();
	var options = $(this).data('options').filter('[value!=\"' + val + '\"]');
	$('#ext3').html(options);
	$('#ext3').val('0');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dext1">
	<label> Extra Vas 1:</label>
	<select name="ext1" id="ext1" ng-model="FormData.Phases">
		<option name="vas" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas" value="1"> VAS 1 </option>
		<option name="vas" value="2"> VAS 2 </option>
		<option name="vas" value="3"> VAS 3 </option>
	</select>
</div>
<br/>
<div id="dext1">
	<label> Extra Vas 2:</label>
	<select name="ext2" id="ext2" ng-model="FormData.Phases">
		<option name="vas2" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas2" value="1"> VAS 1 </option>
		<option name="vas2" value="2"> VAS 2 </option>
		<option name="vas2" value="3"> VAS 3 </option>
	</select>
</div>
<br/>
<div id="dext1">
	<label> Extra Vas 3:</label>
	<select name="ext3" id="ext3" ng-model="FormData.Phases">
		<option name="vas3" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas3" value="1"> VAS 1 </option>
		<option name="vas3" value="2"> VAS 2 </option>
		<option name="vas3" value="3"> VAS 3 </option>
	</select>
</div>

Answer 1

只需更改 $('#ext2').on('change', function ()

下的行

来自:

var options = $(this).data('options').filter('[value!=\"' + val + '\"]');

到:

var options = $(this).data('options').filter('[value!=\"' + val + '\"]').filter('[value!=\"' + $('#ext1').val() + '\"]');

我已经包含多个过滤器以从第一个选择框中过滤掉选定的值。

$('#ext1').on('change', function () {
	if ($(this).data('options') == undefined) {
		$(this).data('options', $('#ext2 option').clone());
	}
	var val = $(this).val();
	var options = $(this).data('options').filter('[value!=\"' + val + '\"]');
	$('#ext2').html(options);
	$('#ext2').val('0');
});

$('#ext2').on('change', function () {
	if ($(this).data('options') == undefined) {
		$(this).data('options', $('#ext3 option').clone());
	}
	var val = $(this).val();
	var options = $(this).data('options').filter('[value!=\"' + val + '\"]').filter('[value!=\"' + $('#ext1').val() + '\"]');
	$('#ext3').html(options);
	$('#ext3').val('0');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="dext1">
	<label> Extra Vas 1:</label>
	<select name="ext1" id="ext1" ng-model="FormData.Phases">
		<option name="vas" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas" value="1"> VAS 1 </option>
		<option name="vas" value="2"> VAS 2 </option>
		<option name="vas" value="3"> VAS 3 </option>
	</select>
</div>
<br/>
<div id="dext1">
	<label> Extra Vas 2:</label>
	<select name="ext2" id="ext2" ng-model="FormData.Phases">
		<option name="vas2" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas2" value="1"> VAS 1 </option>
		<option name="vas2" value="2"> VAS 2 </option>
		<option name="vas2" value="3"> VAS 3 </option>
	</select>
</div>
<br/>
<div id="dext1">
	<label> Extra Vas 3:</label>
	<select name="ext3" id="ext3" ng-model="FormData.Phases">
		<option name="vas3" selected value="0"> -- NO EXTRA VAS -- </option>
		<option name="vas3" value="1"> VAS 1 </option>
		<option name="vas3" value="2"> VAS 2 </option>
		<option name="vas3" value="3"> VAS 3 </option>
	</select>
</div>