显示或隐藏基于多个单选按钮选择

Question

我有两个单选按钮

1. 元件选择是否A或B.

2. 选择是否C或D.

基于在两个选项上，我想让我的dropdown list更新

这里是m y代码。

$(function() { 
 
     $("#A").hide(); 
 
     $("#B").hide(); 
 
     $("#C").hide(); 
 
     $("#D").hide(); 
 
     $('.AorB').change(function() { 
 
     if ($(this).val() == 'A') { 
 
      $('.CorD').change(function() { 
 
      if ($(this).val() == 'C') { 
 
       $("#AC").show(); 
 
       $("#BC").hide(); 
 
       $("#AD").hide(); 
 
       $("#BD").hide(); 
 
       $("#noselect").hide(); 
 
      } else if ($(this).val() == 'D') { 
 
       $("#AC").hide(); 
 
       $("#BC").hide(); 
 
       $("#AD").show(); 
 
       $("#BD").hide(); 
 
       $("#noselect").hide(); 
 
      } 
 
      }); 
 
     } else if ($(this).val() == 'B') { 
 
      $('.CorD').change(function() { 
 
      if ($(this).val() == 'C') { 
 
       $("#AC").hide(); 
 
       $("#BC").show(); 
 
       $("#AD").hide(); 
 
       $("#BD").hide(); 
 
       $("#noselect").hide(); 
 
      } else if ($(this).val() == 'D') { 
 
       $("#AC").hide(); 
 
       $("#BC").hide(); 
 
       $("#AD").hide(); 
 
       $("#BD").show(); 
 
       $("#noselect").hide(); 
 
      } 
 
      }); 
 

 
     } else { 
 

 
      return false; 
 
     } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <label>Select A or B:</label> 
 
    </td> 
 
    <span class="text_11"> 
 
        <td><input type="radio" id="A" name="AorB" class="AorB" required value="A"/><radio style="font-size: 16px;"> A</radio> 
 
        <input type="radio" id="B" name="AorB" class="AorB" value="B"/><radio style="font-size: 16px;"> B </radio></span> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <label>Select C or D:</label> 
 
    </td> 
 
    <span class="text_11"> 
 
        <td><input type="radio" id="C" name="CorD" class="CorD" required value="C"/><radio style="font-size: 16px;"> C</radio> 
 
        <input type="radio" id="D" name="CorD" class="CorD" value="D"/><radio style="font-size: 16px;"> D</radio></span> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td class="select"> 
 
    <label>Date:</label> 
 
    </td> 
 
    <td> 
 
    <select id="noselect" name="noselect"> 
 
     <option value="1">Select</option> 
 
     <option value="1">select A or B first</option> 
 
    </select> 
 
    <select id="AC" name="AC"> 
 
     <option value="">Select</option> 
 
     <?php include_once "AC.php"?> 
 
    </select> 
 
    <select id="BC" name="BC"> 
 
     <option value="">Select</option> 
 
     <?php include_once "BC.php"?> 
 
    </select> 
 
    <select id="AD" name="AD"> 
 
     <option value="">Select</option> 
 
     <?php include_once "AD.php"?> 
 
    </select> 
 
    <select id="BD" name="BD"> 
 
     <option value="">Select</option> 
 
     <?php include_once "BD.php"?> 
 
    </td> 
 
    </select> 
 
</tr>

我现在有2个问题：

• 场景1：如果我选择A，然后C，下拉列表更改为正确的值。如果我然后将A更改为B，则下拉列表不会更新。

• 情景2：如果我选择D或C，然后选择A或B，则下拉列表不会更改。

我怎样改进，使得随时随地单选按钮是可以以任意顺序，将显示正确的下拉列表中选择了jQuery。非常新的JavaScript，所以任何帮助表示赞赏。

Answer 1

如果我正确理解你的问题，下面会做你所需要的。

与您当前尝试的最大问题是，当你点击一个，你添加一个事件处理程序的线元素，但这时如果你改变它到B添加另一个事件处理程序的绳索元件和你不要删除原始事件处理程序，因此当您更改CorD时，两个事件都会被触发。正如你可以看到下面，你可以通过设置起来更简单地避免和（其他所有重复的代码）

var $all=$('.all').hide(); 
 
$('.listen').change(function(){ 
 
    $all.hide() 
 
    var thisLetter = $('[name="AorB"]:checked').val(); 
 
    var thatLetter = $('[name="CorD"]:checked').val(); 
 
    $all.each(function(){ 
 
    var $this=$(this); 
 
    \t if($this.hasClass(thisLetter) && $this.hasClass(thatLetter)){ 
 
      $this.show(); 
 
      $('#noselect').hide(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" id="A" name="AorB" class="listen" required value="a" /> 
 
<radio style="font-size: 16px;"> A</radio> 
 
<input type="radio" id="B" name="AorB" class="listen" value="b" /> 
 
<radio style="font-size: 16px;"> B </radio> 
 
<input type="radio" id="C" name="CorD" class="listen" required value="c" /> 
 
<radio style="font-size: 16px;"> C</radio> 
 
<input type="radio" id="D" name="CorD" class="listen" value="d" /> 
 
<radio style="font-size: 16px;"> D</radio> 
 
<br> 
 
<br> 
 
<select id="noselect" name="noselect"> 
 
    <option value="1">Select</option> 
 
    <option value="1">select A or B first</option> 
 
</select> 
 
<select class="a c all" name="AC"> 
 
    <option value="">Select AC</option> 
 
</select> 
 
<select class="b c all" name="BC"> 
 
    <option value="">Select BC</option> 
 
</select> 
 
<select class="a d all" name="AD"> 
 
    <option value="">Select AD</option> 
 
</select> 
 
<select class="b d all" name="BD"> 
 
    <option value="">Select BD</option> 
 
</select>