Jump to content

Best way of organizing dropdown menus please

benoit1980

By benoit1980
in PHP Coding Help

 Share

Recommended Posts

benoit1980 Member

benoit1980

Posted
Posted

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
Share on other sites
benoit1980 Member

benoit1980

Posted
  • Author
Posted (edited)

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
Edited by benoit1980
Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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
Share on other sites
benoit1980 Member

benoit1980

Posted
  • Author
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.