Bootstrap selected item value for DropDown menu - javascript

I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!

I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)

Related

On click aria-expanded="false" not change and 'show' class also not addes in bootstrap dropdown Angular 5

I am using the bootstrap dropdown in my Angular project. but on click is not showing dropdown-menu. actually, after clicking, the show class not added in the drop-down and aria-expanded="false" is not change into "true
<div class="dropdown>
<button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
<div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
<a class="dropdown-item"
<button>S1 </button>
</a>
<a class="dropdown-item">
<button>S2 </button>
</a>
<a class="dropdown-item">
<button>S3 </button>
</a>
</div>
</div>
I tried your code without your custom style classes and only added a missing " at <div class="dropdown"> and a missing > at < class="dropdown-item"> and it worked for me.
Here is the working code with the missing stuff and without your custom css.
<div class="dropdown">
<button class=" btn btn-secondary
dropdown-toggle" type="button" id="dropdown123"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button <span class="caret"></span>
</button>
<div class="dropdown-menu"
aria-labelledby="dropdown123">
<a class="dropdown-item">
<button>S1</button>
</a> <a class="dropdown-item">
<button>S2</button>
</a> <a class="dropdown-item">
<button>S3</button>
</a>
</div>
</div>
If it does not work please check if you are using Bootstrap 4, maybe it was different with V3 but I dont think so, not sure though.

Javascript to change the text of the button

I am a very new to Javascript. now I have a dropdown list within django.
---Select a status---
ALL
Expired
Pending
if I select give "ALL" as an example, it would navigate to "/all/" page, this is the correct behavior, but how can I change the text to "ALL" ?
<div id="dropdown1" class="dropdown filter" >
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="placeholder">---Select A Status---</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="active" href={{ view_all }}>All</a></li>
<li><a class="" href={{ view_exipred }}>Expired</a></li>
<li><a class="" href={{ view_pending }}>Pending</a></li>
<li class="divider"></li>
</ul>
</div>
Sorry for the incorrect edit.above are the code here.

Dropdown menu in table cell

I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>

Bootstrap Dropdown in the Wrong Place

I am using Bootstrap but I don't know why the dropdown menu is in the middle-left.
Screenshot:
Code:
<td><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" >
<li class="dropdown">Edit</li>
<li class="dropdown">Delete</li>
</ul>
</td>
Wrap your code within <div class="dropdown"> (Example)
<td>
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" >
<li class="dropdown">Edit</li>
<li class="dropdown">Delete</li>
</ul>
</div>
</td>

Multiple buttons in Twitter Bootstrap show the same dropdown - why?

I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}
I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019
I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.

Categories