jquery dropdown menu ITSELF on click with bootstrap-select plugin - javascript

I have a dropdown menu and I want to call a function, when the dropdown menu ITSELF is clicked. I mean the part where you click on the dropdown menu <select> and all the available <options> are displayed.
<select id="p1" title="Select a thing" class="selectpicker show-tick" data-live-search="true">
<option data-hidden="true"></option>
<option>Select A</option>
<option>Select B</option>
</select>
If I want to do something when Select A has been selected, I have the following.
$('#p1').change(function(event) {
console.log("You selected an option");
});
But how to trigger something if the dropdown menu itself is clicked? I would like to load the <option> with data when the dropdown menu itself is clicked.
The following is not working:
$("#p1").click(function(){
console.log("Loading <options>");
});
EDIT:
I found the problem. It is because I use a plugin called bootstrap-select https://silviomoreto.github.io/bootstrap-select/
If I remove class="selectpicker show-tick" data-live-search="true" it works!
But how do I get on click working with the bootstrap-select plugin?

Based on your updated code, you can get the click event via the following:
HTML:
<select id="p1" title="Select a procedure" class="selectpicker show-tick" data-live-search="true">
<option data-hidden="true"></option>
<option>Select A</option>
<option>Select B</option>
</select>
jQuery:
$('.bootstrap-select > button[data-id="p1"]').on('click', function (e) {
console.log('clicked select');
});
Because BootstrapSelect replaces the select with divs and buttons, you'll have to target the correct button as I show above. Note that the ID of your select has now moved into the 'data-id' attribute of the button.
See this new fiddle. Sorry that the styling is messed but the functionality works at least.

The normal on click did not work with the bootstrap-plugin. But they have some documentation regarding events: https://silviomoreto.github.io/bootstrap-select/options/#events
//on click
$('#p1').on('show.bs.select', function (e) {
console.log("hidden.bs.select means on click");
});

Related

See which option was just selected in a multiselect

I have a multiselect bootstrap picker and would like to find the specific option that was just selected. For example, if I have the picker set to something like this:
<select class="form-select selectpicker" multiple aria-label="Default example">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
When the user selects their first option, "Cherry", I would like to alert("Cherry"). When the user then selects their second option, "Apple", I would like to alert("Apple").
I have tried to use the option:selected:last value, but this only works to display the last option in the array of selected option. I would like to display the option that was most recently selected, regardless of its place in the array of selected options. Any insight is greatly appreciated.
EDIT: This questions was closed due to being marked as similar to the question found here: Get selected value in dropdown list using JavaScript
After looking through all of the provided answers in that link, I am not convinced that the questions are the same. I would like to get the most recently selected text in a multiselect picker, not the only selected option in a single select. So, if a user has both Apple and Papaya options selected, but selected the Apple option after selecting the Papaya option, I would like to alert("Apple"). Thanks.
Here Are Two Methods By which you can Use Alert.
First Method: With OnChange
<select class="form-select selectpicker" multiple aria-label="Default example" onchange = "alert(this.value)">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
Second Method: Involves An Event Listener But Its Doing The Same Thing(Javascript)(Assuming That The ID of The Select Tag is selector
function change(){
alert(this.value)
}
document.getElementByID("selector").addEventListener("onchange",change)

How to hide selected text of SELECT(Dropdown)

We want to display Dropdown items when click on dropdown. And need to set text of selected item in Textbox, We done with it using onchange event.
But we do not want to display selected text of dropdown in dropdown;s textbox itself.
We are using dropdown reverse triangle option in front of Textbox to perform necessary logic.
Is it possible to hide dropdown selected text?
Since you havent shared any code assuming few thing I have created a fiddle.. kindly check http://jsfiddle.net/TmJCE/848/
all you need to do is after selecting an item from dropdown reset the dropdown
HTML
<select id="name" >
<option value="">select all</option>
<option value="Text 1">Text 1</option>
<option value="Text 2">Text 2</option>
<option value="Text 3">Text 3</option>
</select>
<input type="text" class="txt">
jQuery
$(document).ready(function(){
$('#name').change(function(){
var x=$('#name').val();
console.log(x);
$('.txt').val(x);
$('#name').prop('selectedIndex',0);
});
});

Autoclick Option in select with jQuery

I'm trying to autoselect a product sort filter with jQuery, but I'm having a bit of trouble getting it to work properly.
<select class="selectProductSort" id="selectPrductSort1" onchange="">
<option selected="selected" value="position:asc">Sorter efter</option>
<option value="price:asc">Pris: laveste først</option>
<option value="price:desc">Pris: højeste først</option>
<option value="name:asc">Varenavn: A til Å</option>
<option value="name:desc">Varenavn: Å til A</option>
<option value="quantity:desc">Lagervarer først</option>
<option value="reference:asc">Reference: Laveste først</option>
<option value="reference:desc">Reference: Højeste først</option>
</select>
I've tried the following so far, but no luck.
$('.selectProductSort option[value="price:asc"]').prop('selected', 'selected').change();
$('.selectProductSort option[value="price:asc"]').trigger( 'click' );
$('.selectProductSort option[value="price:asc"]').click();
I tried with $(document).ready and without.
The first example sets thedesired filter as selected, but the filter function isn't activated, so the products still are ín the same order.
When a filter is selected, the page doesn't reload.
Hope you guys can help me out
https://jsfiddle.net/azc66a0b/
Try this : set value of select and then call click() as shown below. But make sure that your click handler must be registered before calling click.
$('.selectProductSort').val("price:asc").click();
Check below jsfiddle demos before / after calling click
JSFIddle with Click handler registered before calling click
JSFIddle with Click handler registered after calling click
$('#selectPrductSort1').val("name:asc"); // Select by value
text1 = "Reference: Laveste først";
$("#selectPrductSort1 option:contains(" + text1 + ")").attr('selected', 'selected'); // select by text

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

Creating a select drop-down list that expands when a user hover over an option

I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?
Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.

Categories

Resources