I have dropdown and want to show div on dropdown selections. so when i choose option 1 -> shows div 1 when i choose option 2 -> shows div 2 and hide div 1
Something roughly like below, probably? If it is, you'll find a lot more like this inside forum. Try search it <html> <body> <select id="mySelect" onchange="onSelChanged(this)"> <option>One</option> <option>Two</option> <option>Three</option> </select> <div id="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> <script> function onSelChanged(that){ var children = document.getElementById('wrapper').getElementsByTagName('div'); for (var i = 0; i < children.length; i++){ if (i == that.selectedIndex) children[i].style.display = 'block'; else children[i].style.display = 'none'; } } </script> </body> </html> Code (markup):
solved but the issue now is : I am using javascript in footer which enable to show and hide fields in the search box. But when you search and go to listings page the search box fields are all visible. I check on the page and the javascript is in the footer with inspector Here you can see just few fields in search box. After selecting you can see more http://projects.qbf.ie/hogan/ Here are all visible . dont understand why http://projects.qbf.ie/hogan/property-search-results/ CODE IN FOOTER : <script> $(document).ready(function($) { $('.select-buy').hide(); $('.select-rent').hide(); $('.market-rent').hide(); $('.market-buy').hide(); $('.market-commercial').hide(); $('.chzn-select').on('change',function() { if(this.value=='0') { $('.select-buy').hide(); $('.select-rent').hide(); $('.market-buy').hide(); $('.market-rent').hide(); $('.market-commercial').hide(); } else if (this.value=='buy') { $('.select-buy').show(); $('.select-rent').hide(); $('.market-buy').show(); $('.market-rent').hide(); $('.market-commercial').hide(); $('.bedrooms').show(); } else if (this.value=='rent') { $('.select-buy').hide(); $('.select-rent').show(); $('.market-buy').hide(); $('.market-rent').show(); $('.market-commercial').hide(); $('.bedrooms').show(); } else if (this.value=='commercial-rent') { $('.select-buy').hide(); $('.select-rent').show(); $('.market-buy').hide(); $('.market-rent').hide(); $('.market-commercial').show(); $('.bedrooms').hide(); } else if (this.value=='commercial-buy') { $('.select-rent').hide(); $('.select-buy').show(); $('.market-buy').hide(); $('.market-rent').hide(); $('.market-commercial').show(); $('.bedrooms').hide(); } }); }); </script>
Well, you're getting a js-error on the result-page. Have a look in a proper browser - Firefox with Firebug / console installed.