Select and Radio options to show div

Question

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

Answer 1

you mean something like this ? `

$('input[type="radio"], #select').change(function(){
    var inputValue = $('input[type="radio"]').attr("value");
    var targetBox = $("." + inputValue);
    if($('#select').val() !== ''){
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    }
});

`

you also have to add values to your selectBox, check the fiddle https://jsfiddle.net/50wjy9e1/

Answer 2

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

Answer 3

Something in the line of this?

 { const selector = '#icp'; document.addEventListener('change', (e) => { if (e.target.name === 'to_ho' || e.target.id === 'icp_select') { const icp = document.getElementById('icp_select') || {value:''} const to_ho = document.querySelector('[name=to_ho]:checked') || {value:''} const boxes = document.getElementsByClassName('box') const active_boxes = Array.from(boxes).filter(i => i.classList.contains(icp.value + "_" + to_ho.value)) for (box of boxes) { box.classList.remove('show') } for (box of active_boxes) { box.classList.add('show') } } }) } 

 [name=icp] { border: 1px solid red; color: red; } [name=icp]:valid { border-color: green; color: green; } .box { display: none; } .box.show { display: block; } 

 <form> <select name="icp" id="icp_select" required> <option selected disabled value>SELECT</option> <option value="ET">ET</option> <option value="ED">ED</option> <option value="EM">EM</option> </select> <div id="icp_react" class="icp_react"> <input type="radio" name="to_ho" id="to_ho0" value="To" class="_react"> <label for="to_ho0">TO</label> <input type="radio" name="to_ho" id="to_ho1" value="Ho" class="_react"> <label for="to_ho1">HO</label> </div> </form> <div class="ET_To box"> To ET 1 </div> <div class="ET_To box"> To ET 2 </div> <div class="ET_To box"> To ET 3 </div> <div class="ET_To box"> To ET 4 </div> <div class="ET_Ho box"> Ho ET </div> <div class="ED_To box"> To ED 1 </div> <div class="ED_To box"> To ED 2 </div> <div class="ED_To box"> To ED 3 </div> <div class="ED_To box"> To ED 4 </div> <div class="ED_Ho box"> Ho ET 1 </div> <div class="ED_Ho box"> Ho ET 2 </div> <div class="ED_Ho box"> Ho ET 3 </div> <div class="EM_To box"> To EM 1 </div> <div class="EM_To box"> To EM 2 </div> <div class="EM_Ho box"> Ho EM 1 </div> <div class="EM_Ho box"> Ho EM 2 </div> <div class="EM_Ho box"> Ho EM 3 </div> <div class="EM_Ho box"> Ho EM 4 </div> <div class="EM_Ho box"> Ho EM 5 </div> <div class="EM_Ho box"> Ho EM 6 </div> 

Or more general

 { const selector = '#icp'; document.addEventListener('change', (e) => { if (e.target.name === 'icp') { for (item of document.getElementsByClassName('icp_react')) { item.classList.remove('show') } document.getElementById('icp_' + e.target.value).classList.add('show') } if (e.target.classList.contains('_react')) { for (item of document.getElementsByClassName('box')) { item.classList.remove('show') } for (item of Array.from(document.getElementsByClassName('box')).filter(i => i.classList.contains(e.target.value) )) { item.classList.add('show') } } }) } 

 [name=icp] { border: 1px solid red; color: red; } [name=icp]:valid { border-color: green; color: green; } .icp_react { display: none; } .icp_react.show { display: block; } .box { display: none; } .box.show { display: block; } 

 <form> <select name="icp" required> <option selected disabled value>SELECT</option> <option value="ET">ET</option> <option value="ED">ED</option> <option value="EM">EM</option> </select> <div id="icp_ET" class="icp_react"> <input type="radio" name="to_ho" id="to_ho0" value="To" class="_react"> <label for="to_ho0">TO</label> <input type="radio" name="to_ho" id="to_ho1" value="Ho" class="_react"> <label for="to_ho1">HO</label> </div> <div id="icp_ED" class="icp_react"> <input type="radio" name="di_du" id="di_du0" value="Di" class="_react"> <label for="di_du0">DI</label> <input type="radio" name="di_du" id="di_du1" value="Du" class="_react"> <label for="di_du1">DU</label> </div> <div id="icp_EM" class="icp_react"> <input type="radio" name="ba_ma_fa" id="ba_ma_fa0" value="Ba" class="_react"> <label for="ba_ma_fa0">BA</label> <input type="radio" name="ba_ma_fa" id="ba_ma_fa1" value="Ma" class="_react"> <label for="ba_ma_fa1">MA</label> <input type="radio" name="ba_ma_fa" id="ba_ma_fa2" value="Fa" class="_react"> <label for="ba_ma_fa2">FA</label> </div> </form> <div class="To box"> TO </div> <div class="Ho box"> HO </div> <div class="Du box"> DU </div> <div class="Di box"> DI </div> <div class="Ba box"> BA </div> <div class="Ma box"> MA </div> <div class="Fa box"> FA </div>