Question

我正在做一些事情，需要确保下拉值不能在少数下拉列表中重复。
这意味着一旦选择了值，就不应再出现在休息下来

现在我遇到问题，当我点击第一个下拉菜单时，第二个下拉菜单中的值赢得了这个（这是我想要的），它看起来不错，效果很好。但是当我选择第二个下拉列表时，第三个下拉列表将显示我在下拉列表中选择的值（这不是我想要的）。

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

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>

Answer 2

如果要增加选择框的数量，也可以使用选项的禁用状态。以下是您的修改版本：

#include<iostream>
#include<boost/variant.hpp>

struct type_size_visitor : public boost::static_visitor<unsigned> {
  template <typename T>
  unsigned operator()(const T&) const { return sizeof(T); }
};

template <typename... Types>
class MyVariant : public boost::variant<Types...>
{
  using base_type = boost::variant<Types...>;
public:
  // inherit constructors
  using base_type::base_type;

  // add a new method
  unsigned type_size() { return boost::apply_visitor(type_size_visitor(), *this); }

  /* Inheriting operators from boost::variant does not
     work as it normally would. We have to add explicit
     overloads for the operators we want to use.
  */
  bool operator==(const MyVariant& rhs) const {
    // cast rhs to base and delegate to operator in base
    return base_type::operator==(static_cast<const base_type&>(rhs));
  }
};

int main() {
  MyVariant<std::string, char> v;
  v = 1;
  std::cout << v.type_size() << " " << sizeof(char) << std::endl;
  v = std::string("foo");
  std::cout << v.type_size() << " " << sizeof(std::string) << std::endl;

  // comparison operators need workaround shown above
  MyVariant<std::string, char> a, b;
  a = 1; b = 1;
  assert(a == b);
}

$("select[name^='ext']").on("change", function() {
  var selectedValues = [];
  $("select[name^='ext']").each(function() {
    if ($(this).val() !== "0") selectedValues.push($(this).val());
  });
  $("select[name^='ext'] option:not(:selected)").each(function() {
    if (selectedValues.indexOf($(this).attr("value")) >= 0) {
      $(this).attr("disabled", "disabled");
    } else {
      $(this).attr("disabled", false);
    }
  });
});

使用jquery在下拉列表中过滤多个值

2 个答案: