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.
Related
I have a dialog with multiple tabs, the first tab has a list ("SELECT") when a selection is made from the list the number of tabs may change as a result of the callback attached to the list.
In my source I the list callback is attached with:
$("#listID").bind("change", function() {
//Do something
});
In code I want to change the list selection and trigger calling of the change callback. I've tried:
$("#listID").val(3); //3 is one of the valid option values
This didn't result in the change callback being called so I added:
$("#listID").change();
After the setting of the value, this doesn't work either, if I look at the list the high light has not moved.
I've searched online and what I've done should work but it doesn't. What haven't I done?
Here is the HTML:
<select id="listID" size="11">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
Should work fine doing $("#listID").val(3).change()
Note that bind() is deprecated and you should use on()
$("#listID").on("change", function() {
console.log(`Changed value to ${this.value}`)
});
$("#listID").val(3).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="listID">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
If it's not working there is something missing in question as to why
$("#listID").val(2).trigger('change'); //to trigger the change event with value 2
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());
});
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> 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
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>