biggieuk Posted June 5, 2009 Share Posted June 5, 2009 Hi all, i am looking to create a dropdown box that allows for multiple selections via a checkbox. The idea i am going for can be seen on: http://www.monster.co.uk/ if you click on more search options then industries. Could anyone give me some guidance as to creating a dropdown menu like this? I know the standard html dropdown does not provide this facility so i am assuming some sort of DHTML, Javascript thing could produce this? thanks for any help or samples. Dan Quote Link to comment Share on other sites More sharing options...
Axeia Posted June 5, 2009 Share Posted June 5, 2009 Although not with checkboxes, a <select MULTIPLE> does allow the selection of more than one element. Problem with it is that a lot of people don't know how it works so you'll need to add a description like "Hold control to select more than one item, or shift to select everything between (and including) the clicked and last selected item." What they used on that site isn't much more than a toggle to set the display propertie of an element. Something like <html> <head> <title></title> <script type="text/javascript"> function toggleMoreOpt( id ) { var moreContainer = document.getElementById( id ); if( moreContainer.style.display == 'block' ) moreContainer.style.display = 'none'; else moreContainer.style.display = 'block'; } </script> </head> <body> <a href='javascript:toggleMoreOpt( "moreOptions" )'>More</a> <ul id='moreOptions' style='list-style: none; display: block;'> <li><input type="checkbox" id="opt1" /><label for="opt1">Option #1</label></li> <li><input type="checkbox" id="opt2" /><label for="opt2">Option #2</label></li> <li><input type="checkbox" id="opt3" /><label for="opt3">Option #3</label></li> <li><input type="checkbox" id="opt4" /><label for="opt4">Option #4</label></li> </ul> <!-- Hide via javascript instead of hiding them by default to prevent it from being unusable for those without javascript --> <script type="text/javascript">document.getElementById( 'moreOptions' ).style.display = 'none';</script> </body> </html> Please note that I'm showing the options by default and then hiding them Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.