Javascript 禁用已在另一个多选框中选择的选项

我已经看到这在单个选择框中工作，但无法在多个选择框中工作

假设我有两个多重选择：

<select class='test' multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select class='test' multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

---

您需要保存该值并将其传递给另一个选项。像这样：

 $('.test').on('change', function() {
    var selected = $(this).children(':selected').val();
    $('.test').val(selected);
 });

• 编辑- 我将其更改为接受一个值数组

  $('.test').on('change', function() {
      var selected = $(this).val();
      $('.test').val(selected);
  });
  

• 编辑- 我建议使用复选框而不是多重选择。更加用户友好、直观，更容易选择/禁用不同的选项。（参见代码笔）

---

您需要保存该值并将其传递给其他选项。像这样：

 $('.test').on('change', function() {
    var selected = $(this).children(':selected').val();
    $('.test').val(selected);
 });

• 编辑- 我将其更改为接受一个值数组

  $('.test').on('change', function() {
      var selected = $(this).val();
      $('.test').val(selected);
  });
  

• 编辑- 我建议使用复选框而不是多重选择。更加用户友好、直观，更容易选择/禁用不同的选项。（参见代码笔）

---

你可以用另一种方法

$('.test option').click(function(){
  var op = $(this).attr('value');
  // commented out for multiple select ability
  //$('.test option').attr('disabled', null);
  $('.test option[value='+op+']').not(':selected').attr('disabled', $(this).filter(':selected').length > 0 ? true : null);
});

---

你可以用另一种方法

$('.test option').click(function(){
  var op = $(this).attr('value');
  // commented out for multiple select ability
  //$('.test option').attr('disabled', null);
  $('.test option[value='+op+']').not(':selected').attr('disabled', $(this).filter(':selected').length > 0 ? true : null);
});

---

我发现使用jQuery可以缩短时间，更直观：

$('#select-element-id option').on('click', function() {
        $(this).attr('disabled', true);
});

---

我发现使用jQuery可以缩短时间，更直观：

$('#select-element-id option').on('click', function() {
        $(this).attr('disabled', true);
});

---

---

你能再解释一下这个问题吗？我已经将您的代码插入到JSFIDLE中，它似乎在锁定非选择列表上的选择选项（据我所知，这是预期的结果）。添加一个提琴或片段。文档是如何更改的？@Hodrobond就是这样。。如果您选择多个选项，它将仅锁定第一个选定的选项。@dante当我单击左侧列表中的某个元素时，它在右侧变灰（反之亦然）。如果我切换我单击的元素，以前禁用的元素将再次变为可单击，新元素的对应项将变为禁用。请检查我前面评论中的提琴=）没关系，我相信我现在明白了。您希望能够从每个列表中选择多个项目吗？我很快就会处理它。你能再解释一下这个问题吗？我已经将您的代码插入到JSFIDLE中，它似乎在锁定非选择列表上的选择选项（据我所知，这是预期的结果）。添加一个提琴或片段。文档是如何更改的？@Hodrobond就是这样。。如果您选择多个选项，它将仅锁定第一个选定的选项。@dante当我单击左侧列表中的某个元素时，它在右侧变灰（反之亦然）。如果我切换我单击的元素，以前禁用的元素将再次变为可单击，新元素的对应项将变为禁用。请检查我前面评论中的提琴=）没关系，我相信我现在明白了。您希望能够从每个列表中选择多个项目吗？我很快就会摆弄它。好的，再检查一遍，现在应该可以了。要选择多个值，需要按ctrl键。实际上，有些事情不应该发生。如果我在一个列表中选择了一个选项，我应该无法在另一个列表中打开它。一个问题。当我更改第二个列表时，第一个列表应更新其值？如果我在第一个列表中选择Volvo，它将在第二个列表中禁用它，如果我返回到列表1并取消选中Volvo，它将在第二个列表中启用它。。这也可能发生在另一方面。。如果我在第一个列表中选择了它，我就不能在第二个列表中取消选中。我迷路了。您从所有未选中的项开始。如果我在listA上查看沃尔沃，它在listB上不会发生任何事情。如果我在列表B上选中沃尔沃，在列表A上取消选中它，对吗？好的，再检查一遍，现在应该可以了。要选择多个值，需要按ctrl键。实际上，有些事情不应该发生。如果我在一个列表中选择了一个选项，我应该无法在另一个列表中打开它。一个问题。当我更改第二个列表时，第一个列表应更新其值？如果我在第一个列表中选择Volvo，它将在第二个列表中禁用它，如果我返回到列表1并取消选中Volvo，它将在第二个列表中启用它。。这也可能发生在另一方面。。如果我在第一个列表中选择了它，我就不能在第二个列表中取消选中。我迷路了。您从所有未选中的项开始。如果我在listA上查看沃尔沃，它在listB上不会发生任何事情。如果我在listB上选中volvo，在listA上取消选中它，对吗？对，但现在如果我选择多个值，它只会禁用其中一个。嗯，奇怪。每次点击任何选项都会触发它。。。给我一分钟，我在给暴徒写信。电话，没有执行环境。我再次修改了答案。但不知道为什么只有一个。。。每次点击都应该继续，一键-一键+/-禁用选项。看，不能让它工作。。虽然我试着不用选择器，但效果很好。哦。。。您没有说（也没有相应的带有疑问的标记）您使用引导。这绝对改变了事情！看看带有引导和w/o.Right的html布局，但是现在如果我选择多个值，它只会禁用其中一个。嗯，奇怪。每次点击任何选项都会触发它。。。给我一分钟，我在给暴徒写信。电话，没有执行环境。我再次修改了答案。但不知道为什么只有一个。。。每次点击都应该继续，一键-一键+/-禁用选项。看，不能让它工作。。虽然我试着不用选择器，但效果很好。哦。。。您没有说（也没有相应的带有疑问的标记）您使用引导。这绝对改变了事情！查看带有引导和w/o的html布局。