用于前三个响应的jQuery UI组合框

Question

我有一个表单，用户需要选择他的前三种语言。

https://codepen.io/kaleem78/full/YjLGBN/

<table>
  <tr><td>Top 1</td><td><select name='myselect'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 2</td><td><select name='myselect2'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 3</td><td><select name='myselect3'>
  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>
</table>

当用户选择其top 1语言时，该语言不应显示在Top 2和Top 3选项中，而当用户选择其Top 2语言时，Top 3不应显示Top 1和Top 2语言。

当用户更改Top 1或Top 2时，其他的应该相应地更新。

Answer 1

试试下面的代码:你可以使用selectBox的更改侦听器，在其中你可以迭代和检查每个选择框的值，并为其他选择框禁用它。

​

$(function(){
    $('.selectBox').on('change', function(){
          $('.selectBox').find('option').prop('disabled',false);
          $('.selectBox').each(function(){
              var value= $(this).val();
              $('.selectBox').not($(this)).each(function(){
                 $(this).find('option[value=' + value +']').prop('disabled', true);
              });
          });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Top 1</td><td><select name='myselect' class='selectBox'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 2</td><td><select name='myselect2' class='selectBox'>

  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>

  <tr><td>Top 3</td><td><select name='myselect3' class='selectBox'>
  <option value='1'>java</option>
  <option value='2'>javascript</option>
  <option value='3'>actionscript</option>
  <option value='4' disabled>photoshop</option>
  <option value='5' >ajax</option>
</select></td></tr>
</table>

​

Answer 2

为下拉菜单编写一个jQuery侦听器。选择一个选项后，从其他下拉列表中删除这些选项。我马上就会举一个例子。

下面是删除选项的主要逻辑：

$('select').not($(this)).find('option[value=' + value +']').prop('disabled', true);