Javascript 具有相同名称和不同id的选择字段数组。

我有一个选择字段数组，所有字段都具有相同的选项值列表。我想得到的是，如果在任何一个字段中选择了一个值，那么它不应该显示在另一个字段中。下面是一个示例代码。例如，如果我有四个选择字段，如果我在第一个字段上选择“a”，则值“a”不应出现在下一个选择字段上。与“b”、“c”和“d”的其他值相同。 我正在尝试使用java脚本实现同样的功能。我正处于学习阶段。我会非常感激你的帮助。谢谢

<select name='list' id='list_1'>
    <option value='a'>a</option>
    <option value='b'>b</option>
    <option value='c'>c</option>
    <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>

</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

A.
B
C
D
B
C
D
C
D
D

---

因为您不想破坏数据，所以需要隐藏选项。 这很棘手，因为您要合并多个状态

您可以进行几个IF比较，为每个组和选项硬编码一个组合表（恶心），或者使用大量的JS来解决这个问题，但我认为CSS更好

实现这一点的一个简单方法是使用CSS；单个元素上的多个类将您的许多状态转换为可以立即和通用应用的规则（无需硬编码ID或名称）

a b
c d
a b
c d
a b
c d
a b
c d
var combos=[]，//存储定义隐藏/显示规则所需的css
类=新数组（$（“选择”）.length）//存放许多州的地方
$（“选择”）。每个（函数（i，e）{//对于每个下拉列表，
$（this）.change（函数（）{//当它更改时：
classes[i]=this.value；//在右侧插槽中使用更改的值更新数组
document.body.className=classes.join（“”；//使用数组更新body类
});
});
$（“选择选项[值]”）。每个（函数（n，a）{//如果主体具有相同的类，则使用css隐藏每个选项：
combos.push（“body.”+a.value+“option[value=”“+a.value+”]”）；
});
//将动态CSS附加到头部：
$（“head”）.append（“+combos+”{display:none；}”）；

在线演示：

---

如果要将此功能限制在某些下拉列表中，请给它们一个类，如

，因为您不想破坏数据，所以需要隐藏选项。
这很棘手，因为您要合并多个状态

您可以进行几个IF比较，为每个组和选项硬编码一个组合表（恶心），或者使用大量的JS来解决这个问题，但我认为CSS更好

实现这一点的一个简单方法是使用CSS；单个元素上的多个类将您的许多状态转换为可以立即和通用应用的规则（无需硬编码ID或名称）


a b
c d
a b
c d
a b
c d
a b
c d
var combos=[]，//存储定义隐藏/显示规则所需的css
类=新数组（$（“选择”）.length）//存放许多州的地方
$（“选择”）。每个（函数（i，e）{//对于每个下拉列表，
$（this）.change（函数（）{//当它更改时：
classes[i]=this.value；//在右侧插槽中使用更改的值更新数组
document.body.className=classes.join（“”；//使用数组更新body类
});
});
$（“选择选项[值]”）。每个（函数（n，a）{//如果主体具有相同的类，则使用css隐藏每个选项：
combos.push（“body.”+a.value+“option[value=”“+a.value+”]”）；
});
//将动态CSS附加到头部：
$（“head”）.append（“+combos+”{display:none；}”）；

在线演示：

如果您想将此功能限制在某些下拉列表中，请给它们一个类，如
，试试我编写的这段代码。。希望会有所帮助

<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

$(document).on('change', 'select', function() {
   $(this).find('option:selected').addClass('keepit');
   $('option[value="' + this.value + '"]:not( .keepit)').remove();
});


A.
B
C
A.
B
C
A.
B
C
$（文档）.on（'change'，'select'，function（）{
$（this）.find（'option:selected'）.addClass（'keepit'）；
$（'option[value=“”+this.value+”]：不是（.keepit）”.remove（）；
});

试试我写的这段代码。。希望会有所帮助

<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

$(document).on('change', 'select', function() {
   $(this).find('option:selected').addClass('keepit');
   $('option[value="' + this.value + '"]:not( .keepit)').remove();
});


A.
B
C
A.
B
C
A.
B
C
$（文档）.on（'change'，'select'，function（）{
$（this）.find（'option:selected'）.addClass（'keepit'）；
$（'option[value=“”+this.value+”]：不是（.keepit）”.remove（）；
});

将
名称
属性值更改为
列表[1]、列表[2]、列表[2]
，并且始终可以区分它们。或者
List[List_1]、List[List_2]、List[List_3]
-这不太管用，但您会得到这样一个想法：如果用户从最后一次选择的值中首先选择一个值，那么您可以将
name
属性值更改为
List[1]、List[2]
，并且始终可以区分它们。或者
List[List_1]、List[List_2]、List[List_3]
-这不太管用，但您会得到这样一个想法：如果用户先从最后一个选择中选择一个值，会发生什么情况？@nnnnposiible@dandavis由于这些是静态下拉列表，因此，重新填充tricky@dandavis因为这些是静态下拉列表，所以，重新填充会像那样简单，但你能隐藏它们而不是移除它们吗？（用户改变主意，残疾用户需要知识库，当他们向下滚动时会在每个选项上激发change（））我找不到一个简单的方法来做到这一点…感谢@dandavis多年后回到stackoverflow，但它仍然有同样的问题人们得到了解决方案，但不愿意接受答案。但这次我不会离开，我很感激像你这样的人，他们真的在那里帮助别人。。。我喜欢程序员的这一点我喜欢这种简单，但是你能隐藏它们而不是删除它们吗？（用户改变主意，残疾用户需要知识库，当他们向下滚动时会在每个选项上激发change（））我找不到一个简单的方法来做到这一点…感谢@dandavis多年后回到stackoverflow，但它仍然有同样的问题人们得到了解决方案，但不愿意接受答案。但这次我不会离开，我很感激像你这样的人，他们真的在那里帮助别人。。。我爱
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

$(document).on('change', 'select', function() {
   $(this).find('option:selected').addClass('keepit');
   $('option[value="' + this.value + '"]:not( .keepit)').remove();
});