在另一个 <select> 框中选择时禁用 <select> 选项答案

【问题标题】：Disable <select> option when selected in another <select> box在另一个 <select> 框中选择时禁用 <select> 选项
【发布时间】：2017-10-05 01:45:43
【问题描述】：

我在 php mail() 表单中有一组 16 个选择框，如果在任何其他框中选择了一个选项，我想禁用它。选择框中的选项顺序不一样，我需要 php 邮件的值。我希望填写表单的用户不能两次或多次选择相同的选项。

<select name="box1" id="box1">
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select>

<select name="box2" id="box2">
    <option value="Two">Two</option>
    <option value="One">One</option>
    <option value="Three">Three</option>
    <option value="Life">Life</option>
</select>

<select name="box3" id="box3">
    <option value="Life">Life</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
</select>

此外，在网站的下方，我想对另一组 8 个选择框做同样的事情 - 它们包含一些相同的选项，但我希望它们从一开始就可以选择，直到从其中一个被选中。

我对 jQuery 和 JavaScript 知之甚少。帮忙？

【问题讨论】：

那么您需要有关 PHP 的任何帮助吗？不要垃圾标签
PHP 正在运行！所以，只有 jQuery 和 Javascript 才能获得这个禁用选项。

标签： javascript jquery html select

【解决方案1】：

使用.filter 获取与当前值具有相似值的选项元素。

$('select').on('change', function() {
  $('option').prop('disabled', false); //reset all the disabled options on every change event
  $('select').each(function() { //loop through all the select elements
    var val = this.value;
    $('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
      return this.value === val;
    }).prop('disabled', true); //disable those option elements
  });
}).change(); //trihgger change handler initially!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="box1" id="box1">
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

<select name="box2" id="box2">
  <option value="Two">Two</option>
  <option value="One">One</option>
  <option value="Three">Three</option>
  <option value="Life">Life</option>
</select>

<select name="box3" id="box3">
  <option value="Life">Life</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
</select>

Fiddle Demo

【讨论】：

感谢您的回复！但我不想禁用整个选择框 - 我只想确保用户不能在多个框中选择例如“两个”。

【解决方案2】：

谢谢，雷昂。我终于让它完美地使用这段代码：

<script type="text/javascript">
  $('select[name*="box1"]').change(function(){
  $('select[name*="box1"] option').attr('disabled',false);

  $('select[name*="box1"]').each(function(){
    var $this = $(this);
    $('select[name*="box1"]').not($this).find('option').each(function(){
       if($(this).attr('value') == $this.val())
           $(this).attr('disabled',true);
    });
});

});
</script>

【讨论】：