What event to handle choose option from <select>? - javascript

I have an select with options which are loaded by ajax. After that user chooses option and additional data is pulled from ajax.
Of course at least one these options is selected as soon as select is filled with options so when I listen for change of this option:
$('article select.fetchedPosts').on('change', function () {
//do stuff and things
})
and user wants to fetch data for first (by default already selected) option the event is not firing because nothing has changed...
So is there any event in JS which would fire everytime user chose something from select, using keyboard or mouse?

You can do default instead of Option 1 Which option as "Select Option", and the user will have to replace the selection.
<select>
<option>select option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

change should be the correct event. According to MDN docs:
When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a date from a date picker for [...]
There's actually an example select at the end of the page, where you can experiment clicking options or selecting with your keyboard, and each time it fires the event.
It may also change depending on your browser:
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the

Related

How to trigger a callback function when select list text changes (before onchange event fires)?

I have a <select> field like the below:
<select id="my-list" class="default">
<option value=0 selected disabled>Select an item</option>
<option value=1>First Item</option>
<option value=2>Second Item</option>
<option value=3>Third Item</option>
</select>
The default class on the <select> element sets the color to red (indicating to the user that an option needs to be selected here).
Once the user selects an item the class is removed so the color changes to black.
Now what I'm trying to achieve is that the color changes as soon as the text in the select box changes. The onchange event only fires if the user clicks on an item in the list or presses ENTER or the element loses focus.
But if the user hits S for example the text will change to "Second item" and the color remains red until he presses ENTER or tabs out of the field.
Listening for keydown events doesn't work because if the user hits say X the event fires but the text won't change because there is no matching item.
One possible solution could be to use the keydown event and then compare the text to "Select an item" though it doesn't seem very elegant. And how would I get the text that is displayed? jQuery's .text() or .html() return all the options, not just what is displayed.
After writing the last paragraph of my question the answer came to me.
Typing into a select box or using the up and down arrow keys will set the selected attribute to the option displayed. Using the keyup event instead of the keydown event can then be used to simply check the value of the selected option and if it's not 0 the class is removed and the color changes.
$("#my-list").keyup(function(){
if ($("#my-list option:selected").val() !== 0){
$("#my-list").removeClass("default");
}
});
It seems a bit clumsy so perhaps there is a better way, but it works.

Workaround: <Select>ing the first <option> never fires an onchange event

I have a select-option block on a webpage, and I want it to fire for ANY of the options that get selected in it. However, the first option never fires onselect: Not even if a later option was selected previously.
For example, if my code reads:
Settings:
Sensitivity: <select id="sensitivity" onchange="if (this.selectedIndex) ajaxUpdateConfig();">
<option value="25">25%</option>
<option value="50">50%</option>
<option value="100" selected>100</option>
</select>
...then selecting the first option, 25%, never fires the onchange() event.
Similarly, if the first option is the default value, and the user changes away from it and then wants to return back to it, that doesn't fire the onchange event, either.
Note: I'm aware that the standard answer to the "First selection doesn't generate onchange events" problem is to make a dummy (disabled) first option. But that doesn't fit the design of this page: The menu represents shows the current status while offering the options that the user could change the settings to. Having a dummy entry is bad interface design, for this page.
this.selectedIndex is 0 for the first option.
0 is falsy, so your if never fires.
Get rid of the if entirely; there's no reason for it.

dojo Select box, triggering events on select

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..!).

javascript or jquery event that fires whenever the selected value of a select changes

I know i can use the javascript event onchange, or the jquery event change, however, enother of these cover the senario when the user does not change the value of the select him self.
For example, when using javascripts onchange event if I have three cascading selects and I select the first one, and the second one populates and the default value if the second one is the one the user wants, the onchange event of the second select is never fired, hence the third select is never populated.
ideas?
two ways you can do
1>
on second <select> create first option with value= "[choose something]" this way user will be forced to choose some thing from select2
2> When you populate the second select ,trigger its onchange event
How about putting a dummy value at the beginning on the select ,like a blank option. So that the user is forced to select another that has a value.
Insert a dummy item in the second select as the first item:
<option value="">-- select one --<option>
That way the user must fire the change event to select an item,
Autopopulate the third select box with the values it should have for the default of the second is one option. Otherwise as others have suggested a Please Choose option that forces onchange to fire.
If your changing the content via javascript, you can also trigger the change event explicitly.

Keeping jQuerys .change() from running on page load

I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!
You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.
The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.

Categories