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

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 2

试试这个：

$(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 3

您需要更改选择的名称，如下所示：

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

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

然后使用这样的东西：

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

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

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

4 个答案: