How can I handle the collapse event of a select, or trigger the change event even if the selected option did not change ?
I need to have this for a search engine, where the mascot will still move if the option that was selected is the same. The search engine is on this page : http://www.marocpneus.com
For example, if you go ahead and click on the first select "Type de véhicule" and choose "Tourisme" which was already selected, the character will not move to the second select. However if you do change "Tourisme" to one of the other values, the character will indeed move using the classic jQuery change event.
Ok, after some research, it looks like select option clik cannot been fired due to browsers incomptability (look this SO question: Event attached to Option node not being fired)
... but we can simulate the click, to make a workaround, XD, you have the fiddle here: http://jsfiddle.net/H9gg5/3
Js
$('select.click_option').click(function() {
if ( $(this).data('clicks') == 1 ) {
// Trigger here your function:
console.log('Selected Option: ' + $(this).val() );
$(this).data('clicks', 0);
} else {
console.log('first click');
$(this).data('clicks', 1);
}
});
$('select.click_option').focusout( function() {
$(this).data('clicks', 0);
});
Html
<select class="click_option">
<option value="1"> Selected 1 </option>
<option value="2"> Selected 2 </option>
</select>
What does it do? Well, we know we have selected an option (even the same option) because we click twice over the select, so, just count the number of clicks, and when it comes after a previous click, trigger it, XD. The code also handles the lose of focus, because if you click out of the select, it will close with clicks = 1 and you have to reset it.
I've added a class to the select, for triggering only the function when the user clicks the select that you want.
Hope it helps, regards!
Related
so I have a select box like this with more elements being loaded in of course.
<select class="cherry-dropdown">
<option class="cherryOption" value="#cherry_'.$rownum.'">'.$name.'</option>
</select>
And. I'm trying to use javascript to take me to the appropriate page location based off the value attribute in the option.
$('.cherry-dropdown').click(function(){
console.log("yes");
$('.cherryOption').click(function(){
console.log("maybe");
window.location=$(this).val();
});
});
I'm getting yes from the first console.log (opening the select box to reveal the options). But when I click an option I'm not getting the maybe console.log, and thus the window.location part isn't working as well.
What am I doing wrong here...
You only actually need one event listener here, if you target the select menu itself (.cherry-dropdown) and listen for a change event instead of click, and then by passing the event as a argument to access it's value.
$(".cherry-dropdown").change(function (e) {
console.log(e.target.value); //Returns the selected options value
window.location = $(this).val();
});
I have an HTML form with a Javascript custom dropdown function taken from W3Schools. It replaces the ugly default dropdown with a really neat one, and works in most cases. However, I ran into a problem.
The custom dropdown code uses the function "selectedIndex" in order to define which label should be selected when the user clicks. It seems to work, but I am also using the Sisyphus "save form data" plugin, and when I refresh the page, the user changes are lost.
I know it is not a problem with Sisyphus or my implementation, because if I unhide the default original dropdown, I click on it, and upon refresh the options are saved just fine.
This inquiry shows that the "selectedIndex" function doesn't give exactly the same result as if the user had physically clicked on the label. It appears to change the value but somehow doesn't really register it, spooky....
After reading similar issues on stackoverflow, I added the two following lines under the "selectIndex" function: trying to programmatically set it's "selected" state to "true", and also to trigger a click:
s.selectedIndex = i;
s.options[i].selected = true;
s.options[i].click();
Still no luck. Here is a wider view of the code:
// When an item is clicked, update the original select box, and the selected item
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
//update the original select box
s.selectedIndex = i;
s.options[i].selected = true;
s.options[i].click();
//update the new select box
h.innerHTML = this.innerHTML;
}
}
Here is the HTML:
<div class="dropdown has-label">
<label for="jours_entiers_de_travail">Number of days</label>
<div class="select-wrapper">
<select name="jours_entiers_de_travail" id="jours_entiers_de_travail">
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
</select>
</div>
</div>
And a full version of the dropdown can be seen on this Codepen:
https://codepen.io/benviatte/pen/OJNYwRy
This codepen appears to work, but again, the issue comes when I try to use the value assigned by selectedIndex, for example with Sisyphus. The value doesn't seem to have been properly assigned.
Thank you dearly for your help
Sisyphus documentation hints that it uses change events to monitor updates of form elements. Source code appears to confirm this in JSDoc markup for the bindSaveDataOnChange function.
Hence try triggering a change event on the select box instead of clicking the option element programmatically. Untested but possibly like
//update the original select box
s.selectedIndex = i;
s.options[i].selected = true;
// s.options[i].click(); // replace with:
$(s).trigger("change"); // trigger change event on select box
Also see Trigger change event <select> using jquery for a variety of ways of triggering change events in both jQuery and plain JavaScript, and trigger() | jQuery API Documentation.
I seem to be unable to select an element of a drop down list and having the page to recognize the change. And as the option values are generated, I cannot click them directly, but have to make the selection by some kind of index/number.
So when I use this code to select the second option:
casper.evaluate(function()
{
document.querySelector('select[id="sub-product-select"]').selectedIndex = 2;
return true;
});
The second option is set - but the page does not recognize the change and does not change some depending values like price or activating the "buy" button of the same form.
The drop down selection looks like this:
<form id="form-product-add-to-cart" action="/cart/add">
<select id="sub-product-select">
<option value=""></option>
<option value="02T01S1-01"></option>
<option value="02T01S1-02"></option>
<option value="02T01S1-03"></option>
So question is:
How to not only select the the second entry, but make the page recognize it like it were clicked or got a "return" after selection?
Well, for me this code works :
this.mouse.down("select#sub-product-select");//press left button
this.mouse.up('select#sub-product-select > option:nth-of-type(2)');//release left button
Is your selector unique? How do you check the changes? Try slimerJS to see them in live (the press/release click).
I have a AJAX-loaded dropdown that runs a function when it's changed, but I also want it to run the function if the option that is already selected is clicked. (For example, someone selects option A two times in a row, I want it to run the function both times without having to select a different option between them)
JAVASCRIPT:
$(document).on('change','#dropdown',function(e){
//do stuff
}
HTML:
<select id="dropdown">
<option value="optionA">option A</option>
<option value="optionB">option B</option>
<option value="optionC">option C</option>
</select>
It took a bit of experimentation, but there is a way to detect if the dropdown menu of the select was clicked.
Move your code into the click event, and wrap an if tag around it as such:
if(event.pageY<0)
{
// The dropdown menu on the select was clicked!
}
The reason that only this if is needed, is because of the fact that both browsers I've managed to test this on, make it seem like the cursor is outside of the actual page when the event was triggered.
You can find the demo at http://jsfiddle.net/Entoarox/ATm43/.
The pageY property of the event object is one of the properties that jQuery normalizes for cross-browser consistency.
http://api.jquery.com/category/events/event-object/
Replace your on change script with:
$(document).on('click','#dropdown',function(event){
if(event.pageY >= 0) return; // return and don't do anything
// The dropdown menu on the select was clicked!
// do stuff
});
Use
$(document).on('select','#dropdown',function(e){
//do stuff
}
or
$(document).on('click','#dropdown',function(e){
//do stuff
}
The title seems confusing but what I want to do is...
I know how to handle only if the user select new option with this - $('select').change(function(){}).`
But not if the user wants to select the already selected option.
I've also tried with radio but same thing.
Okay for example I have a select with an option (red,blue,green).
<select>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>
and I have this script:
$('select').change(function(){
var val = $(this).val();
alert(val);
});
When I select option 'blue' it alerts a value 'blue', then I select 'green' it alerts 'green' as well. but when I select 'green' again nothing happens.
This question comes to my attention as this is pretty basic stuff but no one actually dig into it further. OP has been using change(), but when you reselect the current selected option nothing is fired!
I tried click(), but it's firing before you can even choose an option.
With blur(), after you're done selecting nothing is fired because the the select element is still being focused, so you need to focus out like clicking outside for it to execute.
So I just suggested OP to switch to a radio type input then handle execution with click() event. That way you can still reselect already marked radio button.
But then I noticed that you just need to get the second click on <select> element because the first click opens the drop down list of options the second click returns the value of your selected option. So I came up with this:
$('select').click(function(){
var $this = $(this);
if ($this.hasClass('open')) {
alert($this.val());
$this.removeClass('open');
}else {
$this.addClass('open');
}
});
But now the problem is when you first click on <select> the drop down is being showned and we've also added the class 'open'. Then clicking elsewhere (without selecting an option) the drop down is hidden so when you click back on <select> the event is fired before you can even select an option.
So I added this code to fix that:
$(document).click(function(e){
var $select = $('select');
if (!$select.is(e.target)){
$select.removeClass('open'); //reset the steps by removing open
}
});
You can test it out in this jsfiddle. Cheers!
I think when <select> loses its focus is also a concern. So I added blur() event. See this update jsfiddle
i solved using onclick='this.value=-1' that reset the selection to nothing...
I have solved this problem by using:
$('#id_selec').on('click', 'option', function (e) {
value = $(this).val();
// ....
The handler works if you select any (including the already selected) option.
In instances where nothing should happen when the user selects the already-selected option I suppose it is a "feature" of the DOM rather than a bug to have no Event occur. However, if your code is doing more with <select> than making a simple selection it is also a nuisance, so I'm grateful others have tackled it here.
The current accepted answer is clever in the use of the click event to capture selection of an already selected <select> option, but if you are willing to specify the length of your list as (in this case) <select size=3>, you can simply set the selected value to "" from your "change" Event, and the same selection will trigger every time.
In this case the OP's example would change to:
HTML:
<select size=3>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>
jQuery:
$('select').change(function(){
var val = $(this).val();
alert(val);
$('select').val("");
});
The only side-effect is that the selection element may now display to the user as three rows rather than one.
(Credit goes to Kirby L. Wallace for the idea of setting the select's value to "").