javascriptjqueryhtmlcouch-cms

Select and Radio options to show div


I want to be able to display the corresponding div (which will contain table) when a select option and a radio option is selected.

I am using couchcms as the backend. The table that i need to generate will be populated by couchcms' tag. I want that, since there are two different divs (here I am using div in place of table) I want to be able to display the div using a combination of options. I need to select an option from a dropdown and then couple it with the radio button option and show the respective div. I have been able to display the div using radio option but how can i couple it with the dropdown.

Working flow: Dropdown -> Radio -> Show Table

document.getElementById("to_ho0").checked = false;
document.getElementById("to_ho1").checked = false;

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
  });
});
.box {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name='icp'>
  <option selected disabled>SELECT</option>
  <option>ET</option>
  <option>ED</option>
  <option>EM</option>
</select>
<label for="to_ho0">
  <input type="radio" name="to_ho" id="to_ho0" value="To" >
  TO
</label>
<label for="to_ho1">
  <input type="radio" name="to_ho" id="to_ho1" value="Ho" >
  HO
</label>

<div class="To box">
  TO
</div>
<div class="Ho box">
  HO
</div>

JSFiddle


Solution

  • $(document).ready(function(){
    var e = document.getElementById("dd_icp");
    var strDD = e.options[e.selectedIndex].text;
    $(document).on("change", "select[id^='dd_icp']", function() {
    	$(".box").hide();
      document.getElementById("to_ho0").checked = false;
    	document.getElementById("to_ho1").checked = false;
      console.log($(this).val());
      $('input[type="radio"]').click(function(){
    	  var inputValue = $(this).attr("value");
    	  var targetBox = $("." + inputValue);
    	  $(".box").not(targetBox).hide();
    	  $(targetBox).show();
    	});
      });
      
    });
    .box{
      display: none;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select name='icp' id='dd_icp'>
        <option selected disabled>SELECT</option>
    		<option>ET</option>
    		<option>ED</option>
    		<option>EM</option>
    </select>
    <label for="to_ho0">
      <input type="radio" name="to_ho" id="to_ho0" value="To" >
      TO
    </label>
    <label for="to_ho1">
      <input type="radio" name="to_ho" id="to_ho1" value="Ho" >
      HO
    </label>
               		
    <div class="To box">
    	TO
    </div>
    <div class="Ho box">
      HO
    </div>