this is really wierd, not sure why this is happening but my onchange is firing twice. any help/ideas is greatly appreciated...
<select id="ddlGender" onchange="myfunc()">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>
Your java script code should be in java script file loaded in your head:
$(document).ready(function(){
$("#ddlGender").unbind('click').change(myfunc);
var myfunc = function (e)
{
// Do something important....
}
});
If I remember correctly you need to unbind click event from select in IE in order to avoid firing event twice.
And your html should not have onchange any more:
<select id="ddlGender">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>
Related
Is there any dedicated event for select tag.
<select id="drp_fruits" class="field-select">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
change is what are you looking for (as event listener).
var activities = document.getElementById("drp_fruits");
activities.addEventListener("change", () => {
//do stuff)
})
Or :
<select id="drp_fruits" class="field-select" onchange="changeHandler()">
Tip: HTML triggers an event, but there are no such "html events". Events are handled by Javascript.
<select onchange="myFunction()">
Simple as that.
Onclick its not good, use onchange function you got value
$('select').on('change',function(){
alert($(this).val());
});
So I have multiple selects like:
<select class="new_select" >
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="new_select" >
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
which are dynamically appended, so I have to use the .on event handler.
For some reason, the following is only fired when the first select is changed. How would I go about getting it to fire for changes to all select elements?
$('.new_select').on('change', function() {
alert('clicked');
alert(this.value);
});
I am open to workarounds too, looking into this, it seems there is some whisper of browsers not supporting multiple selects, so i'm not sure if that is the root of the problem. Sincere thanks for any help, it is greatly appreciated.
Use event delegation as follow:
$(document).on('change','.new_select', function() {
alert('clicked');
alert(this.value);
});
You have to use event delegation, so each element added dynamically can fire the function.
$(document).on('change', '.new_select', function() {
alert('clicked');
alert(this.value);
});
For best performance, ensure to choose the parent element on which you bind your event to make it as narrow as possible instead of document.
I have a select list, #select1 and when the user chooses an option from this list, a certain action happens. I tried to do it with the following javascript code but sadly it is not working:
SCRIPT
jQuery(document).ready(function(){
$( document ).on( "change", "#select1", function() {
alert("test");
});
});
So when I choose a certain option, I don't get the test alert.
Any idea why this is happening?
EDIT
HTML
<select id="select1">
<option selected="selected" disabled="disabled">Choose your country</option>
<option value="2">Canada</option>
<option value="3">France</option>
<option value="4">India</option>
<option value="5">Poland</option>
</select>
I think This will Work
$('body').on('change','#select1',function(){
alert("test");
});
DEMO HERE
I have a select with an ID of vat and I try to do something when the select is changed, but it is not working. I tried several solutions mentioned here at SO, but the alert is not showing. So any idea what is going wrong? Here is my code:
var ready;
ready = function() {
$('#vat').change(function(){
alert("hello");
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
Other action in the same js file do work, e.g.
$('#rate').blur(function() {
recalculateAmounts();
});
This is the HTML:
<select id="vat" name="vat">
<option value=""></option>
<option value="2">6%</option>
<option value="3">19%</option>
<option selected="selected" value="1">21%</option>
</select>
Your HTML must be having some problem otherwise it will always work fine. See this -
http://jsfiddle.net/5X2VY/
Same code as yours
I have a <select> element with the multiple="multiple" attribute. In Chrome (v27), the change() event is getting triggered when the user scrolls by clicking and dragging using the mouse. Once a value has been selected, the problem ceases to exist.
Example Markup
<select multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Example jQuery
$('select').on('change', function() {
alert('Changed!');
});
Is this a bug with Chrome? I've tried searching but haven't come across anything.
Here's a fiddle
It is the bug in chrome
SELECT box with MULTIPLE option fires ONCHANGE event on scroll
and here