时间戳

首页 > 解决方案 > 前三个响应的 jQuery UI 组合框

jquery - 前三个响应的 jQuery UI 组合框

问题描述

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

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>

当用户选择他的前 1 种语言时，该语言不应显示在前 2 和前 3 选项中，当用户选择他的前 2 语言时，前 3 不应显示前 1 和前 2 语言。

当用户更改前 1 或前 2 时，其他应相应更新。

标签： jqueryhtmljquery-uicombobox

解决方案

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

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

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

推荐阅读