禁用使用Jquery从另一个选择选项中选择选项

In each table row, If I select A in the first select option, in the second select option X,Y,M,N should be disabled. If I select B in first select option , in the second select option P,Q,M,N should be disabled. and so on. Please help me on it

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

Thanks in advance

提前致谢

<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>

4 个解决方案

#1

Try this:

$(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');
                  });

#2

try this

<table>
  <tbody>
    <tr>
      <td>
        <select name="type" class="firstType">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>      
      </td>
      <td>
        <select name="item" class="firstItem">
            <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" class="secondType">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>      
      </td>
      <td>
        <select name="item" class="secondItem">
            <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>

$(".firstType").change(function(){
      $(".firstItem").find("*").prop('disabled', false);
    if($(this).val()==1) 
  {
      $(".firstItem").find(".2,.3").prop('disabled', true);
  }
  if($(this).val()==2) 
  {
      $(".firstItem").find(".1,.3").prop('disabled', true);
  }
});
$(".secondType").change(function(){
   $(".secondItem").find("*").prop('disabled', false);
  if($(this).val()==1) 
  {
      $(".secondItem").find(".2,.3").prop('disabled', true);
  }
  if($(this).val()==2) 
  {
      $(".secondItem").find(".1,.3").prop('disabled', true);
  }
});

#3

You will want to alter the names of your select like so:

您将需要更改选择的名称,如下所示:

<select name="type0">
<select name="item0">
<select name="type1">
<select name="item1">

But you can alter the selector however you need of course to classes, ids, etc...

但你可以改变选择器,当然你需要类,ID等...

Then use something like this:

然后使用这样的东西:

var $types = $('select[name^="type"]');
$types.each(function (k, v) {
    $(v).change(function (e) {
        var $items = $('select[name="item' + k + '"]'),
            $options = $items.find('option');

        $options.each(function(key, option) {
            if ($(option).prop('class') != $(v).val()) {
                $(option).prop('disabled', true);
            } else {
                $(option).prop('disabled', false);
                $(option).prop('selected', true);
            }
        });
    });
});

FIDDLE

#4

$(document).ready( function(){
    $('[name="type"]').bind('change', function() {
        var selectedVal = $(this).val();
        var showClasses = $(this).parent().next().find('select').children();
        $.each(showClasses, function(key, option){
            if ($(option).hasClass(selectedVal)) {
                $(option).prop('disabled', false);
                $(option).prop('selected', true);
                $(option).show();
            }
            else {
                $(option).attr('disabled', 'disabled');
                $(option).hide();
            }
        });
    });
});

Note: Hide/Show would make the disabled options not show up in the list if preferred.

注意:如果愿意,隐藏/显示会使禁用的选项不会显示在列表中。