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.
Related
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 want to know how to trigger the onClick event of any select(html combobox element).
I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.
But the two don't fire the dropdown event that have the options of the select.
Ps: i have sure that selector $('#MySelect') exists.
are you looking for this
document.getElementById("MySelect").selectedIndex=3;
Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.
Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).
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.