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

need a clear information. what you need is show only select box, when you select it show radio button when radio button is checked show div. right? — Syed mohamed aladeen, Apr 03 '19 at 10:50
The select box and the radio buttons will be displayed at once and the when they are selected, they shall display the div. till the dropdown and radio are selected the div will not be visible. — Aashish Handa, Apr 03 '19 at 11:08
@SyedMohamedAladeen If we consider the following example probably it will be more clear. Lets say I select a class (of students, value: Grade 1) then select a radio (value: present). Once both are are selected I shall be able to display the name of students present in the grade. the data will be handled by the backend cms but the selection needs to be handled at the frontend. — Aashish Handa, Apr 03 '19 at 11:16

labu4bd · Accepted Answer · 2019-04-03T11:49:05.553

1

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

edited Apr 03 '19 at 11:49

answered Apr 03 '19 at 11:15

labu4bd

693
5
13

In the example code radio works independently and the dropdown works independently. Can they work together? – Aashish Handa Apr 03 '19 at 11:19
sorry i don't understand together, do you want first time scenario in every time? – labu4bd Apr 03 '19 at 11:26
do you want, when user select dropdown first then hide the previous `div` and it will show after radio button selection. – labu4bd Apr 03 '19 at 11:37
yes it is so. each time the values of dropdown and radio change the previous div should not be displayed – Aashish Handa Apr 03 '19 at 11:47
@AashishHanda you can see my answer now, i edit it. if my answer is right then you can accept it. – labu4bd Apr 03 '19 at 11:50

score 0 · Answer 2 · answered Apr 03 '19 at 11:09

0

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/

answered Apr 03 '19 at 11:09

AN1BRA

90
2

It actually happens to be dependent on radio. I am more looking at being able to select a dropdown value then a radio value to display the div. If we consider the following example probably it will be more clear. Lets say I select a class (of students, value: Grade 1) then select a radio (value: present). Once both are are selected I shall be able to display the name of students present in the grade. the data will be handled by the backend cms but the selection needs to be handled at the frontend. – Aashish Handa Apr 03 '19 at 11:15
my take would be to hide the radio buttons and then show them after the select was changed – AN1BRA Apr 03 '19 at 11:24
I wont have an issue in that. As is, there will always be only two radio buttons, i.e. TO and HO. So its fine. – Aashish Handa Apr 03 '19 at 11:39

yunzen · Answer 3 · 2019-04-03T12:48:38.637

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>

Can you also post your previous code as another answer, where in the radio appeared after the value was selected from the dropdown while leaving this answer as is. Please! — Aashish Handa, Apr 03 '19 at 13:09

Select and Radio options to show div

3 Answers3

Linked