Show or hide elements based on multiple radio button selections

Question

I have two radio buttons

1. Select whether A or B.

2. Select whether C or D.

Based on the two selections, I want my dropdown list to be updated

Here are my codes.

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

I now have 2 issues:

• Scenario 1: If I select A and then C, the drop down list changes to the correct values. If I then change A to B, the drop down list does not update.

• Scenario 2: If I select D or C and then A or B, the drop down list does not change.

How do I improve the jquery such that anytime a radio button is selected in whatever order, the correct dropdown list is shown. very new to javascript so any help is appreciated.

Answer 1

If I understand your issue correctly, the below will do what you need.

The biggest issue with your current attempt is that when you click A, you add an event handler to the CorD element, but then if you change it to B you add another event handler to the CorD element and you dont remove the original event handler so when you change CorD, both events are fired. As you can see below, you can avoid that and (all the other duplicated code) by setting it up more simply

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>