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

Show or hide elements based on multiple radio button selections

本文关键字：隐藏 元素 显示 选择 于多个 单选按钮      更新时间：2023-09-26

我有两个单选按钮

  1. 选择 A 还是 B。

  2. 选择 C 还是 D。

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

这是我的代码。

    $(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非常陌生，所以任何帮助都值得赞赏。

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

当前尝试的最大问题是，当您单击 A 时，您将事件处理程序添加到 CorD 元素，但是如果您将其更改为 B，则会向 CorD 元素添加另一个事件处理程序，并且不会删除原始事件处理程序，因此当您更改 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);
   	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>

相关文章：