javascript - 使用 Jquery 从另一个 Select Option 禁用 Select Option

Question

在每个表行中，如果我在第一个选择选项中选择 A，则在第二个选择选项中应该禁用 X、Y、M、N。如果我在第一个选择选项中选择 B，则在第二个选择选项中应该禁用 P、Q、M、N。等等。请帮帮我

提前致谢

<table>
  <tbody>
    <tr>
      <td>
        <select name="type">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>      
      </td>
      <td>
        <select name="item">
            <option class="1" value="p">P</option>  
            <option class="1" value="q">Q</option>
            <option class="2" value="x">X</option>
            <option class="2" value="y">Y</option>
            <option class="3" value="m">M</option>
            <option class="3" value="n">N</option>
        </select>      
      </td>
    </tr>
    <tr>
      <td>
        <select name="type">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>      
      </td>
      <td>
        <select name="item">
            <option class="1" value="p">P</option>
            <option class="1" value="q">Q</option>
            <option class="2" value="x">X</option>
            <option class="2" value="y">Y</option>
            <option class="3" value="m">M</option>
            <option class="3" value="n">N</option>
        </select>      
      </td>
    </tr>
  </tbody>
</table>

Answer 1

试试这个:

$(document).ready(function()
                  {
                      var $nameSelects = $('[name=type]');
                      $nameSelects.on('change', function()
                                          {
                                              var $typeSelect = $(this);
                                              var selectedValue = $typeSelect.val();

                                              // get the item select
                                              var $nameSelect = $typeSelect.closest('td').next().find('[name=item]');
                                              var $toDisableOptions = $nameSelect.find('[class!='+selectedValue+']');
                                              $toDisableOptions.attr('disabled', 'disable');

                                              var $toEnableOptions = $nameSelect.find('[class='+selectedValue+']');
                                              $toEnableOptions.removeAttr('disabled');
                                          });

                      $nameSelects.trigger('change');
                  });