Question

我有两个具有相同值的选择

例如：

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

如何阻止用户在两个框中选择相同的值？

我使用PHP从数据库中填充选择值。

编辑：

我到达了这个：jsfiddle

但是在更改已选择的值时需要改进。

Answer 1

首先，HTML和CSS不是为此而设计的。

说，也许你可以破解CSS做类似的事情但是由于<option>内部<select>没有任何关系（Child-Parent，Sibling ...），因此您无法使用CSS伪选择器（:checked）来禁用以下选项：

（此代码不适用于这种情况，但如果选项将在同一个<select>中，它将删除重复项，因为它们将是兄弟姐妹）

[value="volvo"]:checked + [value="volvo"] {display: none;}

Answer 2

$('#1').change(function() {
  $("#2").not($(this)).find("option[value='" + $(this).val() + "']")
    .prop("disabled", true)
    .siblings().removeAttr('disabled');
});

Fiddle

如果您不想重新启用以前选择的选项，则可以移除兄弟姐妹部分。

Answer 3

我到达了我想要的东西。 https://jsfiddle.net/zrr9ngj8/2/

阻止用户在select html上选择相同的值

3 个答案: