Detect if the selected value in <select> is selected again [duplicate] - javascript

Here is my simple code:
$(".test").change(function(){
alert("user clicked");
});
<select class="test">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
It's all simple and working, but I want to get that function called not only when user changes option, but when he clicks on the same option that is already selected, I've tried click event but it gets fired up before user even clicka on any option, what could I do?

doesn't work in chrome.
$(".test option").click(function(e){
console.log('click');
});
updated your fiddle.
put the click on the option
EDIT: looks like it isn't possible without a bunch of work like using click on the select and comparing the location it was clicked or something hokey like that.
I am not sure what the end goal is, but the click on the select might work if you can do the processing one extra time when they initially click into it.
another article on it:

If you mean that there is only one thing in the select (like in the problem I was having), you could create a default disabled option, and set that as the selected. This would mean that if you had one option, onchange would fire because the disabled was the one that was previously selected:
<option disabled selecte>Select an option</option>
<option> Only Option </option>

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.

Triggering an event

I have a target website where there is the following dropdown menu.
<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
<option value="">default</option>
<option value="p1" data-href="/callback/p1">P1</option>
<option value="p2" data-href="/callback/p2">P2</option>
<option value="p3" data-href="/callback/p3">P3</option>
</select>
When an item is selected from the menu, it triggers a "change" event and a function is called when this event happens. I have debugged the event using Chrome and you can see the debugging output when I selected an item from the dropdown menu. I have taken a screenshot from the debugger.
Now, let me explain what I am trying to do. I use a javascript function to select an item from the dropdown menu using the following code:
var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");
In the last line, I try to trigger the same event that happens originally in the webpage as if I manually selected the item. however, it doesn't trigger anything. |I see in the debug output that the event is triggered by class. I have tried many different things but didn't work. Could anyone shed some light on this issue? How can I trigger the same event that happens in that webpage using jquery or javascript?
Your code:
$('#level1-option').trigger("select");
...will trigger an event called select (which isn't related to the value of a form field change), but the event you stopped on in the debugger is change, not select:
If you want to trigger the change event, trigger the change event:
$('#level1-option').trigger("change");
// Difference is here -------^
Side note: Because you're using jQuery, your code can be simpler, you dont need the getElementById or the setSelectedValue:
$('#level1-option').val("p2").trigger("change");
Try this
$('#level1-option').trigger("change");

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.

Select box onChange event

I am little confused about this: How can you trigger the javascript event onChange of a select box if there is only one option in it?
add a default empty option like Select...
<select>
<option>Select...</option>
<option value="val_1">Option 1</option>
</select>
If you have only one value, it won't change, but if they focus on it, and then click out of it, the onBlur event will trigger.
Was that what you needed? http://jsfiddle.net/j3Xga/1/ I know this is not a jQuery question.

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