How do you create the bootstrap dropdown without the actual button? I want to use this feature somewhere else.
Without bootstrap (from http://www.w3schools.com/tags/tag_select.asp):
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I want what you get when you click on the button, but not the button. Bootstrap styling would be a plus.
image from: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h
You basically want to trigger the dropdown without manually having to click on it. So you need to make use of window.onload in javascript to trigger the dropdown on page load.
I have also taken the liberty to use the Bootstrap dropdown as you wanted.
HTML
<div class="dropdown">
<!-- the id is important here -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
JavaScript
window.onload = function () {
$("#dropdown").dropdown('toggle')
};
Updated Codepen here
Related
I'm using country picker from Bootstrap form helper:
Country Picker
Problem is that i need to initialize it dynamically with a country. I'm using data-country="US" as default, anyways i need to change it on document ready function.
<div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
From the Example 3, you can use
$(document).ready(function(){
$('#country-select').bfhcountries({country: 'TN'});
});
$('#LoadCountry').click(function(){
$('#countries1').bfhcountries({country: 'TN'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>
<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>
use the html below to select a default country on initialize. Also add bootstrap-formhelpers.js and bootstrap-formhelpers.css to your html or your select will not be populated with data.
<form><select id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>
and to select a country after initialization,
$('#country-select').val('TN');
see the document for more options on initilization.
Here's a working fiddle.
Per OP's comment The OP is using a theme using select2, quoting from there
Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.
and therefore to reflect changes;
$('#country-select').val('TN').trigger('change');
I am using the foundation dropdown that comes out of the box and I have a select tag so a user can choose a language.
But when a user clicks on the select tag foundations dropdown menu closes not allowing them to pick a language.
so ideally I'd like them to be able to select a country and language then when they click on the button to then close the menu and obviously this will cause a refresh of the page.
I've looked into using the aria-autoclose attr in the documentation but I can't get my head round how or where to use it.
<li>
<a href="">
UK
<i class="icon-arrow_down"></i>
</a>
<ul class="menu country-selector">
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Country</h6>
<select name="" id="" aria-autoclose="false">
<option value="">Germany</option>
<option value="">United Kingdom</option>
<option value="">France</option>
<option value="">Spain</option>
<option value="">Belgium</option>
</select>
</li>
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Language</h6>
<select name="" id="" aria-autoclose="false">
<option value="">German</option>
<option value="">English</option>
<option value="">Italiano</option>
<option value="">Dansk</option>
<option value="">Norsk</option>
</select>
</li>
<li class="country-selector__item">
<button type="submit" class="small expanded button" aria-autoclose="true">CHANGE</button>
</li>
</ul>
Let me know if I need to explain anything in a better way.
/*
* Language Select Tag
*/
$('.country-selector select').on('click', function(event) {
event.stopPropagation()
})
I just needed to stop the event from bubbling on the element that I wanted to not close for anyone else wondering how to do this
After click on select options are show just in second and after user can't choose option for wizard.
We using Hogan.js and bootstrap and on other elements work great but on one specific modal its not working, on other modals working also great.
<select name="date-range" class="form-control">
<option value="week-over-week">Week Over Week</option>
<option value="month-over-month">Month Over Month</option>
<option value="quarter-over-quarter">Quarter Over Quarter</option>
<option value="year-over-year">Year Over Year</option>
<option value="false">-------------</option>
<option value="custom">Custom Date Range</option>
UPDATE: We found that maybe is problem when calling div over modal container and inside div we have select option, also this happen only in FF.
UPDATE: Select option is inside ul tag and look like
<ul class="dropdown-menu hasdaterange" role="menu" style="position: absolute; top: 175px; left: 803px;">
<li>
<div class="calendar"><select>..</select>
</li>
</ul>
This is because you have dropdown in dropdown in modal. Try to re-factor yours html elements.
I modified my asp.net 2.0 website to be mobile friendly. On desktops and tablets, the navigation menu is a horizontal bar styled with the class mobilemenu, and on all other devices it is a dropdown menu, styled with class mobiledropdown. Everything works except on mobile devices with the dropdown menu, the home page menu item does nothing when selected, but all the other dropdown items navigate correctly. In both cases the url for home page is "./" but I also tried hardcoding it with the full http://www plus my domain and that also works for mobilemenu but not mobiledropdown.
I am thinking it must be related to the javascript which is used only for the dropdown.
The code is below. it is contained in an include file. the css hides or shows the appropriate menu based on media queries and that all works great.
The first div element is for larger devices and is the code that has been used for several years without any issues. I added the mobilemenu class for hiding it on smaller devices. I added the second div for showing the dropdown on smaller devices.
<div class="mobilemenu" style="width:90%; margin-left:5%; margin-right:5%; margin-top:0%; margin-bottom:1%; padding:0px;">
<div id="menu" style="text-align:center;width:100%;height:22px; padding:0px;">
<ul id="nav" style="line-height: 22px; width:100%; margin:0px; padding:0px;">
<li style="width:15%;">
<a class="custom" href="./">Home</a>
</li>
<li style="width:20%;">
<a class="custom" href="Order.aspx" >Order</a>
</li>
<li style="width:15%;">
<a class="custom" href="Company.aspx" >Company</a>
</li>
<li style="width:20%; ">
<a class="custom" href="Download.aspx" >Downloads</a>
</li>
<li style="width:15%; ">
<a class="custom" href="Blog.aspx" >Blog</a>
</li>
</ul>
</div>
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="./" selected="">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div>
</div>
Remove the dot (.):
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="/" selected="">Home</option>
{rest of your code goes here}
</select>
I found a solution, although I do not understand why it works so maybe someone could explain.
I changed the html code for the dropdown menu by inserting a "Menu" option as the first option and removed the selected attribute on the Home option. It seems illogical that I have to add a menu item that I dont want.
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option>Menu</option>
<option value="./">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div
I have a nested dropdown list created using the latest version of Twitter BootStrap. I need to have a select list containing many elements in the nested dropdown. I am able to get the nested dropdown working fine and the select option shows up no problem. Unfortunately in IE9 after clicking into the select list, moving the mouse over any item causes the dropdown to close. This problem does not manifest in other browsers. What's even more unlucky is that I must support IE7+ as part of this work.
There is a jsfiddle of the error at: http://jsfiddle.net/GtbSE/2/
Can anybody shed any light?
From your example I can change it to allow the dropdown within the 'channel' menu option in IE with a few minor changes to your fiddle: http://jsfiddle.net/amelvin/XxSTF/ - but you'll need to re-style.
I wonder if bootstrap was getting confused by the dropdown-menu items.
<span class="dropdown" id="filter-add">
<a href="#filter-add" id="addFilter" class="dropdown-toggle" data-toggle="dropdown" >
More
</a>
<ul id="Channels" class="nav nav-pills">
<li class="dropdown">
Channel
<ul class="dropdown-menu">
<li>
<select>
<option value="1" >LIst Item 1</option>
<option value="2" >LIst Item 2</option>
<option value="3" >LIst Item 3</option>
<option value="4" >LIst Item 4</option>
<option value="5" >LIst Item 5</option>
<option value="6" >LIst Item 6</option>
</select>
</li>
</ul>
</li>
<li><a>Cancel</a></li>
</ul>
</span>
$('.dropdown select').click(function(e) { e.stopPropagation(); });
$("#Channels").hide();
$("#addFilter").click(function() { $("#Channels").show(); });