Question

我有两个单选按钮

选择A还是B.
选择是否为C或D.

根据这两个选项，我希望我的dropdown list更新

这是我的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我现在有两个问题：

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

如何改进jquery，以便无论何时按任何顺序选择单选按钮，都会显示正确的下拉列表。非常新的JavaScript，所以任何帮助表示赞赏。

Answer 1

如果我正确理解您的问题，以下内容将满足您的需求。

当前尝试的最大问题是，当您单击A时，您将向CorD元素添加事件处理程序，但如果将其更改为B，则将另一个事件处理程序添加到CorD元素，你不删除原始事件处理程序所以当你更改CorD时，两个事件都被触发。正如您在下面所看到的，您可以通过更简单地设置它来避免这种情况和（所有其他重复代码）

＆＃13;

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);
   	if($this.hasClass(thisLetter) && $this.hasClass(thatLetter)){
          $this.show();
          $('#noselect').hide();
        }
   });
});

＆＃13;

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

＆＃13;

根据多个单选按钮选择显示或隐藏元素

1 个答案: