根据先前的下拉列表过滤下拉列表

Question

请问如何根据用户选择的第一个下拉列表过滤第二个下拉列表？

例如：如果用户在第一个下拉列表中选择 AIA，则第二个下拉列表被禁用。

<tr>
    <td NOWRAP WIDTH="15%"><font FACE="ARIAL" SIZE="2"><strong>Level 1 Organizer</strong></font></td>
    <td NOWRAP >
            <font FACE="ARIAL" SIZE="2"><strong>
        <select name="Organizer" size="1" style="font-family: Arial; font-size: 10pt" onchange="Validate_Report_Level(this.value)">
            <option value="Partnership">Partnership</option>
            <option value="AIA">AIA</option>
            <option value="Agency">Agency</option>
        </select>
            </strong></font>
    </td>
</tr>

Answer 1

试试这个：

html:

<select class="selectItem" name="Organizer" size="1" style="font-family: Arial; font-size: 10pt">
  <option value="Partnership">Partnership</option>
  <option value="AIA">AIA</option>
  <option value="Agency">Agency</option>
</select>

<select class="selectItem" name="Organizer" size="1" style="font-family: Arial; font-size: 10pt">
  <option value="Partnership">Partnership</option>
  <option value="AIA">AIA</option>
  <option value="Agency">Agency</option>
</select>        

jquery：

$('.selectItem').on('change', function () {
  var value = $(this).val();
  $(this).addClass('selected');
  $('.selectItem option:not(.selected)').prop('disabled', false);
  $('.selectItem option[value="' + value + '"]:not(.selected)').prop('disabled', true);
  $(this).removeClass('selected');
});

检查：https://jsfiddle.net/ws6xp69r/