Show hide multiple divs based on select value

Question

Looking for some jQuery to help hide and reveal content in a simple form I'm creating.

Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).

I think data attributes would be a good route to go down but a little unsure of where to start.

<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div data-response="op1">
      This is content for option 1.
    </div>
    <div data-response="op2">
      This is content for option 2.
    </div>
    <div data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

score 1 · Answer 1 · 2017-12-07T08:06:33.153

Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:

$('#select-box').change(function(){

   var selectVal = $(this).val();
   $('.content, #other-questions').hide();
   $('.content[data-response="op' + selectVal + '"], #other-questions').show();

});

.content, #other-questions {
display: none;
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div class="content" data-response="op1">
      This is content for option 1.
    </div>
    <div class="content" data-response="op2">
      This is content for option 2.
    </div>
    <div class="content" data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

I've updated my answer to include classes which are better for selecting elements than data attributes.

This potentially looks like a clean solution but it's showing the "other-questions" div from the outset. This div should only appear when options 1-3 are selected. — okass, Dec 06 '17 at 15:50

score 1 · Answer 2 · answered Dec 07 '17 at 04:07

I highly recommend reading Decoupling Your HTML, CSS, and JavaScript. You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.

$(document).ready(()=>{
  $('.js-revealer').on('change', function(){
    var $select = $(this);
    var $selected = $select.find('option:selected');
    var hideSelector = $selected.data('r-hide-target');
    var showSelector = $selected.data('r-show-target');
    
    $(hideSelector).addClass('is-hidden');
    $(showSelector).removeClass('is-hidden');
  });
});

.is-hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box" class="js-revealer">
      <option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
      <option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
      <option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
      <option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
    </select>
    </div>

    <div data-response="op1" class="opt-1 is-hidden">
      This is content for option 1.
    </div>
    <div data-response="op2" class="opt-2 is-hidden">
      This is content for option 2.
    </div>
    <div data-response="op3" class="opt-3 is-hidden">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions" class="opt-other is-hidden">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Can you clarify the second half of the .ready line? Why did you put in =>? — okass, Dec 07 '17 at 10:20
It's an [Arrow Function Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). — Erik Philips, Dec 07 '17 at 14:38
Ah I see. This article explains it better I think: https://ilikekillnerds.com/2015/01/a-guide-to-es6-arrow-functions/ — okass, Dec 08 '17 at 14:06
Just a word of warning that it looks like the arrow function expression doesn't work in IE11 and older versions of Safari — okass, Dec 19 '17 at 16:08

score 0 · Answer 3 · answered Dec 06 '17 at 14:05

I would suggest using classes for this, there is no need for data attributes.

$(function() {
    $('#select-box').change(function(){
        if($('#select-box').val() == '1') {
            $('.response1').show();
            $('.response2').hide();
            $('.response3').hide();
            $('#content').show();
        } 
        else if($('#select-box').val() == '2') {
            $('.response1').hide();
            $('.response2').show();
            $('.response3').hide();
            $('#content').show();
        }
        else if($('#select-box').val() == '3') {
            $('.response1').hide();
            $('.response2').hide();
            $('.response3').show();
            $('#content').show();
        } 
    });
});

.response1, .response2, .response3 {
  display: none;
}

#content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div class='response1' data-response="op1">
      This is content for option 1.
    </div>
    <div class='response2' data-response="op2">
      This is content for option 2.
    </div>
    <div class='response3' data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div id='content' data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

manikant gautam · Answer 4 · 2017-12-07T04:05:33.380

I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide to hide the element and show to show the element.

$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
  var value = $(this).val();
  if(value !="" && value<=3 && value !=0){
    console.clear();// to clear older logs.
    console.log('Selected value'+$(this).val());
    $('[data-response^=op]').attr('class',"hide");//On change hide all div's
    var selector = "op"+value;
    $(document).find("[data-response='"+selector+"']").attr('class',"show");
    $("#other-questions").attr('class',"show");//Show matching div.
  }else{
   $("#other-questions").attr('class',"hide");
   $('[data-response^=op]').attr('class',"hide");
  }

})

.hide{
display:none;
}

.show{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div data-response="op1">
      This is content for option 1.
    </div>
    <div data-response="op2">
      This is content for option 2.
    </div>
    <div data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions" class="hide">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Thanks. Looks like a good solution although when the user goes back to option 0 ("please select") the "other questions" div is still showing. How can I account for this? — okass, Dec 06 '17 at 15:54

Show hide multiple divs based on select value

4 Answers4

Linked