I'm looking for a solution beside mouseover so the detection is also effective with arrow up/down button.
you can use the change event - http://api.jquery.com/change/ which will be triggered when the selected value changes
$("select").change(function (){});
Related
I am aware that the select HTML element has an onChange and onFocus event listener, but is there a way to call a function when the user clicks out of the select menu without selecting an option?
You probably can use the "on click outside" technique.
https://github.com/BosNaufal/click-outside-js
https://github.com/TooTallNate/click-outside
Instead of looking for onBlur event you detect that user clicked outside your HTML element. It should be enough to implement the logic you want.
When onFocus is called you set some flag, like selectOpen to true. Then onClickOutside event you check is the flag set for true and call any code you want.
My function uses jQuery to select an option from a select element:
$('#id>option:eq(13)').prop("selected",true);
However, this does not trigger the event that is supposed to happen when the user manually selects an option. Is there a way to trigger this event?
yes there is a way. you can trigger events from jquery object.
$('#id>option:eq(13)').prop("selected",true).trigger('change');
I'm designing a webpage where I have a combobox (drop down list) and it has several items in it. I want to be able to click the element and select the first item and it should fire the changed event.
Initial situation:
I will click the button next to 1/2000 and:
Afterwards, if I click on 1/2000, I want the changed event to fire. I know it is simple with jQuery, but I couldn't find how to search for this problem so couldn't find an answer.
Thanks, Can.
I think James is right, the question is not how to simply detect a change, he rather wants to know detect the click.
You could use this code but you need to find a way to make it not fire twice if another option is selected:
$('select option').click(function(){
$(this).parent('select').trigger('change');
});
$('select').change(function(){
alert("Bam!");
});
The event is fired when you select the option, if you want to do something when it's fgired you should do:
$('#yourselect').change(function(){
alert('changed');
});
Look at this fiddle:
http://jsfiddle.net/5wc37/
EDIT - tanks to james now i understand what the poster want. One thing you coukd do is binding the click event to the select and check if the target is an option or a select. if it's an option, do what you want:
$('select#yourselect').click(function(e) {
if(e.target.tagName === "OPTION"){
alert(this.value);
};
});
fiddle
http://jsfiddle.net/5wc37/12/
I have a select element with an onChange event that does fire when I click the select box and select a new value within it. But, when I tab to the select box and press the up or down arrows to change the select box's value, the event does not fire.
I am using jQuery().change(function(){ ... }); to set the event
When you tab into a <select> element, the change event doesn't fire until you press the Enter key.
For an onChange() to fire the value must be changed and the input must be blur()-ed (focus moved elsewhere); which is why it fires in your first case, but not in the second.
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
Reference:
change().
As others have stated, the change event doesn't happen until the blur event. You'll need to monitor keyup as well to capture someone moving changing the values with the arrow keys.
Monitor keyup and change,
$('select').bind('change keyup', function() {
// Handle
});
http://jsfiddle.net/robert/Je26w/
You can trigger the blur event on keyup on the select and then give back focus, which will trigger the change:
$('select').keyup(function(){
$(this).blur().focus();
});
example: http://jsfiddle.net/niklasvh/XEg36/
Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?
You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.
Use Jquery's change function
$("#idofselect").change(function(){ });
To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.