CODEWITHSUNDEEP
jquerydropdown
eazy4me
eazy4me

Reputation: 123

Show / Hide multiple DIVs with Select using jQuery

I essentially have the same situation as a lot of other people.

Through extensive searching within Google I was able to come up with several different methods in which people claim their method works. I have yet to get any to work correctly yet. I don't yet know enough about jQuery to fully understand how to write this from scratch, thus I rely on really good examples for now.

What I've been trying to work with (based on examples I've found and tried) is this:

<script type="text/javascript">
    $(document).ready(function() {
        ('.box').hide();
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

Note: I am using brackets rather than the less-than and greater-than signs around html to display correctly in this message. What I get when I test this:

On first load with nothing selected => No DIV is display.

When I select DIV Area 1 => DIV Area 2 and 3 are displayed.

When I select DIV Area 2 => DIV Area 1 and 3 are displayed.

When I select DIV Area 3 => DIV Area 1 and 2 are displayed.

My brain is fried for the day. What can I do to fix this?

Upvotes: 2

Views: 755

Answers (3)

ErickBest
ErickBest

Reputation: 4692

as others noted, you missed a $.

BASED on your comment above: On first load with nothing selected => No DIV is displayed. When I select DIV Area 1 => DIV Area 2 and 3 are displayed. When I select DIV Area 2 => DIV Area 1 and 3 are displayed. When I select DIV Area 3 => DIV Area 1 and 2 are displayed

If you want to show the other DIVs and NOT the one selected... you can use this code:

$(function() {

    $('.box').hide();
        $('#dropdown').change(function() {
          var v = $(this).val();
                $('.box').hide();
                $(".box:not(#div"+v+")").show();           

        });


        });

See FIDDLE: https://jsfiddle.net/dwn2bwhn/19/

Upvotes: 0

SSD
SSD

Reputation: 1391

You are missing $ reference.

I tried your code in JsFiddle with $, it works fine

$(document).ready(function() {
        $('.box').hide();        
    });
//just tried to move it out of document. ready. But it makes no difference
$('#dropdown').change(function() {        
    $('#divarea1')[ ($(this).val() == "area1") ? 'hide' : 'show' ]();
    $('#divarea2')[ ($(this).val() == "area2") ? 'hide' : 'show' ]();
    $('#divarea3')[ ($(this).val() == "area3") ? 'hide' : 'show' ]();
    });

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Note that you're missing the $ reference to jQuery in the JS code. I'm going to assume that's just a typo in the question.

The simplest way to achieve this is to show() all the divs on change of the select, then use the chosen value to hide the relevant single div based on its id. Something like this:

$(document).ready(function() {
  $('#dropdown').change(function() {
    $('.box').show().filter('#div' + $(this).val()).hide();
  });
});
.box {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dropdown" name="dropdown">
    <option value="0">Choose</option>
    <option value="area1">DIV Area 1</option>
    <option value="area2">DIV Area 2</option>
    <option value="area3">DIV Area 3</option>
  </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

Upvotes: 4

Related Questions