In the documentation I see I can programmatically toggle a dropdown by doing:
$().dropdown('toggle')
That works fine, but what if I want to dropdown to be shown or not shown? Is there a way to do something like this?
$().dropdown('show')
$().dropdown('hide')
According to the docs the only method there is for bootstrap dropdowns is toggle. However you can use the aria-expanded attribute to see if the dropdown is expanded or not. For example, if you wanted to "hide" all of the dropdowns you would do something like this:
$(".dropdownClass").each(function(){
if($(this).attr("aria-expanded") == true) //depending on your jQuery version you may want to use .prop() instead of .attr()
$(this).dropdown('toggle');
});
I'm slightly confused by your question. Calling $().dropdown('toggle') will reverse the state of the dropdown. For instance, it will show the dropdown if the dropdown is hidden; or hide the dropdown if it's open.
There are no methods aside from toggle that can be called for the dropdown.
Edit: you can register listeners for some of the other instance events (like show.bs.dropdown for instance, so you can use code to check if the dropdown is being shown, but cannot invoke it directly aside from using toggle, as mentioned)
Doesn't seem possible: Dropdown plugin seems to only have two public methods (toggle and keydown). And toggle does not accept any arguments for customization - only event.
Take a look at the source code yourself: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js
Related
I'm trying to create a dropdown menu with jSuites that fires a function once one of the items in the list is selected.
Unfortunately, I can't figure out how to fire the function. I tried with "onchange" both as attribute of the <div> and within the definition fo the jdropdown, but nothing seems to work.
I attach a fiddle here with a dropdown menu made with that works and does what it should, and two jSuites menus that should behave in the same way but they don't...
What am I doing wrong?
Can this be done at all?
Any help is welcome...
http://jsfiddle.net/2x4qnj1h/1/
use that instead:
onchange: refresh_dropdown,
you used a literal, not a function.
Documentation with examples : https://jsuites.net/v4/dropdown-and-autocomplete/events
I'm trying to nest a dropdown inside an element which already has a click event bound to it.
I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling $(...).dropdown()
When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work.
When you use $(...).dropdown('toggle') it works on the first click but after that the functionality is broken.
Here is a JSFiddle that exactly mimics my structure.
JSFiddle
Just add this function in your script it's work fine
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I update your jsfiddle click here
http://plnkr.co/edit/rO1cev9Pw7TNbeGLioVk?p=preview
How should I prevent the dropdown from closing If I want to have multiple checkboxes and check or uncheck more than one at a time?
Since the dropdownToggle observes click events to close the dropdown menu, you will need to stop propagation of click events on checkbox elements. This can be easily done like so:
<input type="checkbox" ng-click="$event.stopPropagation()">
And the working plunk: http://plnkr.co/edit/AcbhOkKr2rGrPeoge26H?p=preview
I had a similiar issue with bootstraps dropdown and I wanted a native ( angular only ) implementation of a multi- dropdown select ( Basically I wanted to replace chosen since it depends on jquery ) . So I wrote one myself .
Here is the plunker demonstrating the dropdown :
http://plnkr.co/edit/lxewJUN8li9YQj9h1cIz?p=preview
It has support for Select All as well if you are in need of something like that.
Hope this helps.
NOTE : For some reason it only works with the unstable branch.
I'm having difficulty changing the value of select box in Zurb's foundation. I'm using the custom forms which just hides the actual select box and uses an unordered list as the select box.
My problem is that the usual method of changing the value of select box doesn't work:
$('#selectboxID').val('something')
The code above assumes that the value of each of the options in the select box is the same with the text:
<option value="1">1</option>
I also tried:
$($('.dropdown ul li')[1]).addClass('current')
$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one
But it doesn't work either.
There's also alternative use case when you're binding on change event yourself, you might not want to trigger it. Code to just force a refresh on select:
Foundation.libs.forms.refresh_custom_select(#jQueryElement, true)
where #jQueryElement is a original hidden select.
You have to trigger "change" event after changing selected index.
Example:
// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;
// Fire change event
$('#selectboxID').trigger('change');
Hope this helps
There have been some modifications to the way that the change event is handled recently in the Foundation code.
You can still achieve what you want using the trigger() method, but you have to add a 'force refresh' flag:
$('#selectboxID').trigger('change', true);
If you are using Foundation 3:
Updated to the latest Foundation 3 release.
Setting selectedIndex, using JQuery's val() or anything which triggers a change event is working out of the box.
If you are using Foundation 4:
This seems to be a regression. As a - hopefully temporary - workaround you can force to update the custom select by using the refresh_custom_selection method, e.g.:
Foundation.libs.forms.refresh_custom_selection($('select'))
Note: It is refresh_custom_selection, not refresh_custom_select!
It is not necessary to use the latter (or trigger('change', true)) because they both completely rebuild the custom select, i.e. they re-copy your select options which involves lots of DOM manipulation and it can slow things down a lot. (Depending on the size of your select options and your other code)
On the other hand refresh_custom_selection just updates the displayed value which is a much more lightweight operation.
PS: Instead of refresh_custom_selection you could also use
$('a.current', $select.next()).text($('option:selected', $select).text());
But that code makes assumptions on the generated HTML, so it is better to stick to the provide utility methods
i am working in html for a custom drop down menu. I want to click the arrow and the list to open the hidden options, but nothing happens when i click the arrow? I do not know what is wrong. http://jsfiddle.net/Hunter4854/rrmJR/1/
The easiest solution might be to just bind the click event on the arrow so that it triggers the click even of the drop down like this:
$('.arrow').click(function() {
$('.custom-select').trigger('click')
});
jsFiddle example.
BTW, any reason why you're using such an old version of jQuery?
I simply put your .arrow div into the custom-select div and it's working. It doesn't really matter where to put your arrow since you position it absolutely) The working example: http://jsfiddle.net/skip405/rrmJR/6/