I'm pretty new to HTML, CSS, JS, Bootstrap and JQuery and I have a problem I have been unable to find the solution to.
I have a simple dropdown as such:
<div id="testform" class="container">
<form action="action_page.php">
<fieldset>
<legend>Study</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Digital Media Engineering</li>
</ul>
</div>
</fieldset>
</form>
</div>
And I have a div that is collapsed on document ready
$(document).ready(function(){
$(".focus_hide").addClass("collapse");
});
What I want to do is to get this div to show when clicking on my dropdown value (In this case digital media engineering). However I want to add multiple solutions, so based on what you choose in the dropdown I want to show a div that matches this.. I plan on having multiple divs matching the choices in the dropdown and then only showing the div that matches the choise. The div I want to show when selecting "digital media engineering" is this:
<div class="focus_hide" id="dme">
<form action="action_page.php">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Social media and apps</li>
<li>UX User experience</li>
<li>Data science</li>
<li>Computer games</li>
<li>Computer graphics</li>
</ul>
</div>
</fieldset>
</form>
</div>
What I am missing is the JS code to "un-collapse" the div with id="dme"..
The below code snippet will give you a general idea of what you are needing to do. Please note changes where made to the below to make it work. You will have to find those changes and how they achieve your desired result.
$(document).ready(function() {
$(".focus_hide").hide();
$(".show_dme").click(function() {
$(".focus_hide").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testform" class="container">
<form action="action_page.php">
<fieldset>
<legend>Study</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Digital Media Engineering
</li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="focus_hide" id="dme">
<form action="action_page.php">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Social media and apps
</li>
<li>UX User experience
</li>
<li>Data science
</li>
<li>Computer games
</li>
<li>Computer graphics
</li>
</ul>
</div>
</fieldset>
</form>
</div>
Related
In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>
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 :)
I'm trying to use a bootstrap dropdown toggle as a filter to change various controls. I'm able to get the links within the toggle to change the div with the controller in it, but I can't get the date selector to work that I'm attempting to for some reason.
Also - for some reason my two dropdown selectors won't change the default for some reason?
Any help would be greatly appreciated!
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="float:left" class="col-md-3">
<div class="">
<h5>Filter</h5>
<div id="switcher" class="btn-group">
<button style="width:110px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Week
</li>
<li>Month
</li>
<li>Stage
</li>
<li>Team
</li>
</ul>
</div>
</div>
</div>
<div style="float:left" class="col-md-9">
<div class="col-sm-3">
<div class="filter" id="week">
<div style="margin-top:10px;margin-left:15px;">
<h5>Week</h5>
<input style="width:200px" id="date-picker-1" type="text" class="date-picker form-control" />
</div>
</div>
<div class="filter" id="month">
<div style="margin-top:10px;margin-left:15px;">
<h5>Month</h5>
<input style="width:200px" id="date-picker" type="text" class="date-picker-2 form-control" />
</div>
</div>
<div class="filter" id="stage" class="" style="margin-top:10px;margin-left:15px;">
<h5>Stage</h5>
<button style="width:200px" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select Stage</span> <span class="caret"></span>
</button>
<ul style="margin-left:30px" class="dropdown-menu" role="menu">
<li>Stage 1
</li>
<li>Stage 2
</li>
<li>Stage 3
</li>
<li>Stage 4
</li>
</ul>
</div>
<div class="filter" id="team" class="" style="margin-top:10px;margin-left:15px;">
<h5>Team</h5>
<button style="width:200px" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select Team</span> <span class="caret"></span>
</button>
<ul style="margin-left:30px" class="dropdown-menu" role="menu">
<li>Team 1
</li>
<li>Team 2
</li>
<li>Team 3
</li>
<li>Team 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/toomanyjulians/zh4trzgw/
I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>
Using Bootstrap 3.x, the following produces a drop down menu. I need a dropdown menu that behaves like an HTML form, with a (predetermined) value for each item in the dropdown. How can I combine these 2 things to get the functionality of an HTML form with the style of a Bootstrap btn-group?
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<form>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
You could do something like this..
http://bootply.com/103058
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
</ul>
And use jquery to prevent the dropdown from closing on click..
$('.dropdown-menu>form').click(function(e){
e.stopPropagation();
});