使用下拉和Javascript顯示隱藏Divs？

我想要做的就是使用html下拉菜單隱藏或顯示HTML中的div。首先完成了JavaScript，但有問題。使用下拉和Javascript顯示隱藏Divs？

基本上用戶會在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>

任何幫助將是巨大的

來源

2013-01-15 madzcoding

jQuery＃IS＃JavaScript。 –

[顯示基於下拉菜單選擇的選定div的可能的重複]（http://facebook.stackoverflow.com/questions/12543097/show-selected-divs-based-on-drop-down-menu-choice） – cpilko

無關的評論：你拼寫「大學」像「大學」！ –

代碼obs的作品，但不是在我的網頁，即時嘗試找出原因。 – madzcoding

我給它一個去使用原生的JavaScript：

編輯：特別感謝Khez建議使用o而是一個三元運算符。

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

2013-01-15 15:43:10 kinsho

+1因爲我喜歡本地方法，如果它在三元操作符的位置document.getElementById（options [iter] .value）.style.display = options [iter] .value == selectedValue？'block'：'' none'' – Khez

這肯定是一個更性感的方法。事實上，我會編輯我的代碼來做到這一點。 – kinsho

該代碼看起來很性感，但即時通訊工具無法正常工作，可能缺少支架或其他東西，但引用在那裏，我一直在爲什麼什麼事情都沒有發生過我的大腦 – madzcoding

相關問題

使用下拉和Javascript顯示隱藏Divs？

回答

相關問題