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

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

Answer 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); 
    } 
}); 

Answer 3

您将要改变你的选择，像这样的名字：

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

但你可以改变但是选择您需要的课程班，IDS等...

然后使用这样的事情：

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

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

注：隐藏/显示将使禁用选项不显示在列表中，如果首选。