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
Related
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 input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
I am learning jQuery and in a project I fell into a problem. What I want is, there is a select box, which have some values. When my page loads, I want that if this select box has a certain value selected, its immediate div will appear automatically, otherwise, that div will be hidden.
My problem, here no event is occurring, it all will happen right after the page loads.
I did the same kind of work in another page, but there the div appears when I "select" a certain value. But, here I want this to happen when the page loads.
So what I tried :
html code :
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
This is my jQuery code :
<script>
$(document).ready(function(){
if($('.selector').val()=="volvo")
$(this).next('.show').show();
});
</script>
So, what I want is, if the .selector has the value "volvo", its next div(which has the class "show") will show up, otherwise not. Here, I am not using any change event. I want this happen after the page has been loaded.
I tried this too :
if($('.selector').val()=="volvo")
$(this).next().show();
But same result, nothing happens, the doesn't show up.
What should I do now ?
N.B.: Please notice that there are multiple <select> elements.
You are using this in document-ready handler, where it referees to document. You should bind change event with select and trigger it on page load.
Use
$(document).ready(function() {
//Bind change event
$('.selector').change(function() {
if ($(this).val() == "volvo") {
$(this).next('.show').show();
}
}).change(); //Trigger on page load
});
When you are using that in document.ready this doesn't refer to select.
You should say
$('.selector').next('.show').show();
DEMO
Here is solution. Hope its work for you :-
<select class="selector">
<option value="select">select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
Jquery code
$(document).ready(function(){
$(".selector").on("change", function(){
$val = $(this).val()
// alert($val);
if($val == "volvo"){
$(".show").show();
}else{
$(".show").hide();
}
})
});
Checkout below link
JSFiddle
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
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>