benoit1980 Posted November 19, 2014 Share Posted November 19, 2014 Hi Everyone, Someone is asking me a bit of help on a website, I know a bit php and HTML5, I would like to know what would be the best of doing this please: 1)I need to create 2 big buttons, according to the choice of the buttons a different dropbox menu with towns will showup. 2)When the user chooses one of the town, in any drop down, I would like to show a different DIV with content in it. Here is a practical example: BUTTON A BUTTON B if Button A is pressed, show dropdown menu A if BUTTON B is pressed, show dropdown menu B If town 1 from dropdown menu A is chosen show DIV 1 If town 2 from dropdown menu A is chosen show DIV 1 If town 3 from dropdown menu A is chosen show DIV 2 If town 4 from dropdown menu A is chosen show DIV 3 If town 5 from dropdown menu A is chosen show DIV 1 If town 1 from dropdown menu B is chosen show DIV 6 If town 2 from dropdown menu B is chosen show DIV 5 If town 3 from dropdown menu B is chosen show DIV 5 If town 4 from dropdown menu B is chosen show DIV 6 If town 5 from dropdown menu B is chosen show DIV 4 How to do this without reloading the page please? Thank you, Bambinou Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/ Share on other sites More sharing options...
Barand Posted November 19, 2014 Share Posted November 19, 2014 You would initially build you page content and dropdown options with PHP, but the showing of the div content would be done client-side using javascript/jquery Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/#findComment-1497038 Share on other sites More sharing options...
benoit1980 Posted November 20, 2014 Author Share Posted November 20, 2014 Hi, Thank for the reply, would you have an example of showing hiding the Div based on what is chosen in the drop down menu please? Also for the towns, do I need to use a switch case? Thank you, Ben Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/#findComment-1497063 Share on other sites More sharing options...
benoit1980 Posted November 20, 2014 Author Share Posted November 20, 2014 Ok, I have found an example here: http://jsfiddle.net/EhtrR/1135/ And tried to make my own using bootstrap but all I see are my buttons and nothing else, the js is not showing or hidding the code in my div, any idea why please? Thanks <head> <script src="../js/jquery/jquery-1.11.1.js"></script><style>.no-display { display:none; position:absolute; top:50px;}</style></head> <script>$("#button1").on('click', function() { $("#eatin_takeaway_drop").fadeIn(); $("#delivery_drop").fadeOut();}); $("#button2").on('click', function() { $("#eatin_takeaway_drop").fadeOut(); $("#delivery_drop").fadeIn();}); </script> <br><br><br><br> <div class="container"><div class="row clearfix"><div class="col-md-12 column"><div class="row clearfix"><div class="col-md-6 column"><a href="#" id="button1" class="btn btn-lg btn-success">EAT IN / TAKE AWAY</a></div><div class="col-md-6 column"><a href="#" id="button2" class="btn btn-lg btn-success">DELIVERY</a></div></div><div class="row clearfix"><div class="col-md-12 column no-display" id="eatin_takeaway_drop">HI THIS IS THE RESULT OF BUTTON1</div></div><div class="row clearfix"><div class="col-md-12 column no-display" id="delivery_drop">HI THIS IS THE RESULT OF BUTTON2</div></div></div></div></div> Where did I do wrong? Any idea please? Thank you, Ben Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/#findComment-1497069 Share on other sites More sharing options...
Barand Posted November 20, 2014 Share Posted November 20, 2014 Here's an example <?php $a_towns = array(1=>'Town A','Town B','Town C','Town D','Town E'); $opts="<option value=''>- Select Town -</option>\n"; foreach($a_towns as $k=>$t) { $opts .= "<option value='$k'>$t</option>\n"; } ?> <html> <head> <style type='text/css'> div.hideable { border: 1px solid gray; width: 200px; height: 50px; padding: 20px; font-size: 20pt; } #div1 { background-color: red; } #div2 { background-color: green; } #div3 { background-color: blue; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $().ready(function() { $(".hideable").hide(); $("#menuA").change(function() { $(".hideable").hide(); switch ($("#menuA").val()) { case '1': case '2': $("#div1").show(); break; case '3': $("#div2").show(); break; case '4': $("#div3").show(); break; case '5': $("#div2").show(); break; } }) }) </script> </head> <body> <select name='menuA' id='menuA'> <?=$opts?> </select> <br> <div id="div1" class='hideable'>DIV 1</div> <div id="div2" class='hideable'>DIV 2</div> <div id="div3" class='hideable'>DIV 3</div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/#findComment-1497075 Share on other sites More sharing options...
benoit1980 Posted November 20, 2014 Author Share Posted November 20, 2014 I also tried another way as below(pure javascript) but I have a problem, I cannot get the bootstrap drop down menu staying aligned when it opens in a bootstrap column. Any idea why please? Thanks, Ben <!DOCTYPE html><html lang="en"> <head> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style>.no-display { display:none; position:absolute; top:50px;}.btn-group { margin: 0 auto; text-align: center; font-size:0 !important;}.btn-group a { display:inline-block;}</style> <br><br><br><br> <div class="container text-center extra_pages_text_black"><div class="row clearfix"><div class="col-md-12 column"> <div class="row clearfix"><div class="col-md-12 column"><h2>Choose</h2></div></div><br><br><div class="row clearfix"><div class="col-md-5 column"><a href="#" id="button1" class="btn btn-lg btn-success">BUTTON1</a></div><div class="col-md-2 column"><h2>OR</h2></div><div class="col-md-5 column"><a href="#" id="button2" class="btn btn-lg btn-success">BUTTON2</a></div></div> <div class="row clearfix" id="eatin_takeaway_drop"> <div class="col-md-12 column"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul></div> </div></div><div class="row clearfix" id="delivery_drop"><div class="col-md-12 column">THIS IS THE RESULT OF BUTTON2</div></div></div></div></div> <script>$("#button1").on('click', function() { $("#eatin_takeaway_drop").fadeIn(); $("#delivery_drop").fadeOut();}); $("#button2").on('click', function() { $("#eatin_takeaway_drop").fadeOut(); $("#delivery_drop").fadeIn();}); </script> <!-- //CONTACTS --> <br><br><br><br> <br><br><br><br> <script src="../js/jquery/jquery-1.11.1.js"></script> Link to comment https://forums.phpfreaks.com/topic/292578-best-way-of-organizing-dropdown-menus-please/#findComment-1497111 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.