禁用使用Jquery從另一個選擇選項中選擇選項

在每個表格行中，如果我在第一個選擇選項中選擇A，則在第二個選擇選項X中應禁用Y，M，N。如果我在第一選擇選項中選擇B，則在第二選擇選項P中，應禁用Q，M，N。等等。請幫我在這禁用使用Jquery從另一個選擇選項中選擇選項

在此先感謝

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

來源

2014-11-22 user3785931

您是否試圖編寫任何解決方案？ – Tomanow 2014-11-22 20:33:53

是的沒有工作。我仍在努力。 – user3785931 2014-11-22 20:41:41

試試這個：

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

來源

2014-11-22 20:47:32 haul

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

來源

2014-11-22 20:47:16 ashkufaraz

您將要改變你的選擇，像這樣的名字：

<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

來源

2014-11-22 20:57:43 Tomanow

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

注：隱藏/顯示將使禁用選項不顯示在列表中，如果首選。

來源

2014-11-22 21:17:25 dimma314

禁用使用Jquery從另一個選擇選項中選擇選項

回答

相關問題