Question

我希望能够做的是使用html下拉菜单隐藏或显示我的HTML中的div。首先完全使用javascript进行此操作但有问题。

基本上用户会在ddl中选择一个扇区说“pub-chains”，并且与该扇区关联的pub Div将显示在页面上，而其他div则隐藏在视图之外，任何有这种经历的人都会这样做吗？

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>

任何帮助都会很棒

Answer 1

Here you go.使用jQuery：

var select = $( '#dropdown' );

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

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

showTab( select.val() );

Answer 2

我会使用原生Javascript来试一试：

编辑：特别感谢Khez建议使用三元运算符。

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');
    }
}

使用下拉菜单和Javascript显示隐藏Divs？

2 个答案: