Show Hide Divs using drop down and Javascript?

Question

What I want to be able to do is using a html drop down menu either hide or show the divs that are in my HTML.First had a go doing this entirely in javascript but had problems.

Basically a user would select a sector in the ddl say "pub-chains" and the pub Div associated with that sector would be displayed on the page and the other divs hidden from view, anyone with any experience of doing this?.

HTML

<html>
  <head>Select a Business Sector:</head>
  <form>
                <p>
                <select id="dropdown" name="dropdown">
                    <option value="Pub-Chains" selected="selected"> Pub Chains </option>
                    <option value="Councils">Councils </option>
                    <option value="Property">Property </option>
                    <option value="Various">Various </option>
                    <option value="Universitys">Universitys </option>
                </select>
                </p>
            </form>
  <body>

<div id="Pub-Chains">
    <a href="http://www.marstons.co.uk/"><img src="gfx/Marstons.jpg" alt="Marstons"></a>
    <a href="http://www.charleswells.co.uk/"><img src="gfx/cw.jpg" alt="Charles Wells"></a>
    <a href="http://www.enterpriseinns.com/Pages/Home.aspx"><img src="gfx/EnterpriseInns.jpg" alt="Enterprise Inns Pubs"></a>
    <a href="http://www.greeneking.co.uk/"><img src="gfx/gk.jpg" alt="Greene King"></a>
    <a href="http://www.robinsonsbrewery.com/"><img src="gfx/RobinsonBrewery.jpg" alt="Robinson Brewery"></a>
</div>

<div id="Councils">
    <a href="http://www.bassetlaw.gov.uk/"><img src="gfx/BassetLaw.jpg" alt="BassetLaw Council"></a>
    <a href="http://www.harrogate.gov.uk/"><img src="gfx/Harrogate.jpg" alt="Harrogate Council"></a>
    <a href="http://www.n-somerset.gov.uk/"><img src="gfx/nsc.jpg" alt="North Somerset Council"></a>
    <a href="http://www.worcester.gov.uk/"><img src="gfx/wsc.jpg" alt="Worcester City Council"></a>
    <a href="http://www.hyndburnbc.gov.uk/site/index.php"><img src="gfx/hc.jpg" alt="Hyndburn Council"></a>
    <a href="http://www.chesterfield.gov.uk/"><img src="gfx/cbc.jpg" alt=""></a>
    <a href="http://www.west-dunbarton.gov.uk/"><img src="gfx/wdc.jpg" alt="West Dunbartonshire Council"></a>
</div>

<div id="Property">
    <a href="http://www.chiverscommercial.co.uk/"><img src="gfx/cc.jpg" alt="Chivers Commercial"></a>
    <a href="http://www.colliers.com/en-GB/UK"><img src="gfx/colliers.jpg" alt="Colliers International"></a>
    <a href="http://www.savills.co.uk/"><img src="gfx/savills.jpg" alt="Savills Estate Agents"></a>
    <a href="http://www.sandersonweatherall.co.uk/"><img src="gfx/Sandersonw.jpg" alt="Sanderson Weatherall"></a>
    <a href="http://www.campbellgordon.co.uk/index.aspx"><img src="gfx/campbellgordon.jpg" alt="Campbell Gordon"></a>
    <a href="http://www.gva.co.uk/"><img src="gfx/gva.jpg" alt="gva"></a>
    <a href="http://www.struttandparker.com/"><img src="gfx/strutt&parker.jpg" alt="Strutt and Parker"></a>
    <a href="http://www.fishergerman.co.uk/"><img src="gfx/fishergerman.jpg" alt="Fisher German"></a>
    <a href="http://www.carterjonas.co.uk/"><img src="gfx/carterjonas.jpg" alt="Carter Jonas"></a>
    <a href="http://www.derbyhomes.org/"><img src="gfx/derbyhomes.jpg" alt="Derby Homes"></a>
    <a href="http://www.knightfrank.co.uk/"><img src="gfx/KnightFrank.jpg" alt="Knight Frank"></a>
    <a href="http://www.smithsgore.co.uk"><img src="gfx/smithsgore.jpg" alt="Smiths Gore"></a>
    <a href="http://www.eastofengland.coop/"><img src="gfx/eastofenglandcoop.jpg" alt="East of England Coop"></a>
    <a href="http://www.Riverside.co.uk"><img src="gfx/rside.jpg" alt="Riverside"></a>
    <a href="http://www.midlandheart.org.uk/"><img src="gfx/mheart.jpg" alt="Midland Heart"></a>
</div>

<div id="Various">
    <a href="http://www.co-operative.coop/"><img src="gfx/coop.jpg" alt="The Co-operative"></a>
    <a href="http://www.anesco.co.uk/site/en/content-folder/home"><img src="gfx/anesco.jpg" alt="Anesco"></a>
    <a href="http://www.savills.co.uk/"><img src="gfx/savills.jpg" alt="Savills Estate Agents"></a>
</div>

Any help would be great

possible duplicate of show selected divs based on drop-down menu choice — cpilko
– cpilko, Commented Jan 15, 2013 at 15:53
Unrelated comment: You spell "Universitys" like "Universities"! — ʇolɐǝz ǝɥʇ qoq
– ʇolɐǝz ǝɥʇ qoq, Commented Oct 11, 2015 at 17:48

oleq · Accepted Answer · 2013-01-15 15:37:16Z

2

Here you go. With jQuery:

var select = $( '#dropdown' );

function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}

select.change( function() {
  showTab( $( this ).val() );   
});

showTab( select.val() );

answered Jan 15, 2013 at 15:37

oleq

15.9k1 gold badge40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

madzcoding Over a year ago

The code obs works but not in my webpage, im trying to figure out why.

madzcoding Over a year ago

kinsho · Accepted Answer · 2013-01-15 15:54:36Z

1

I'll give it a go using native Javascript:

Edit: Special thanks to Khez for suggesting the use of a ternary operator instead.

document.getElementById('dropdown').onchange = function(e) 
{

    var selectedValue = document.getElementById('dropdown').value,
        options = document.getElementById('dropdown').options,
        iter;

    for (iter = options.length - 1; iter >= 0; iter -= 1)
    {
        document.getElementById(options[iter].value).style.display =  
            (options[iter].value === selectedValue ? 'block' : 'none');
    }
}

edited Jan 15, 2013 at 15:54

answered Jan 15, 2013 at 15:43

kinsho

5363 silver badges11 bronze badges

4 Comments

Khez Over a year ago

+1 because I liked the native approach, would've loved it more if it where a terniary operator document.getElementById(options[iter].value).style.display=options[iter].value==selectedValue?'block':'none'

kinsho Over a year ago

That would definitely be a sexier approach. In fact, I'll edit my code to do just that.

madzcoding Over a year ago

The code does look sexy , but im having trouble getting it to work, maybe missing a bracket or something but the references are there and i have been racking my brains over the reason why nothing is happening

kinsho Over a year ago

So it works fine for me. I noticed in your html above that you left out a div that corresponds to the 'Universitys' option. Perhaps that could be your problem?

Collectives™ on Stack Overflow

Show Hide Divs using drop down and Javascript?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related