Not able to fire onchange event dynamically from javascript after selecting options of bootstrap selectpicker
Question
I am using javascript code to select a option on body load as shown in the snippet. This works fine for me. The issue i am facing in the next step is that i am not able to call onchange event dynamically as soon as the value gets selected in selectpicker.
Code what i have written to select the options dynamically
$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');
After this i am mapping a simple function addcname1 to onchange event which gives an alert of selected option. but this is not working for me.
Snippet has been provided which explain the problem statment more clearly.
Can you please guide me through where i am going wrong?
Thanks
function openmd2(pnamea){ $('select[name=pname]').val(pnamea); $('.selectpicker').selectpicker('refresh'); $(document).on('change','.selectpicker',function(){ addcname1(this.options[this.selectedIndex]) }); } function addcname1(getval){ var myname = getval.getAttribute('value'); alert(myname) }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <body onload="openmd2('1')"> <select class="selectpicker" name="pname"> <option value="0">select</option> <option value="1">Mustard</option> <option value="2">Ketchup</option> <option value="3">Relish</option> </select> </body>
2 answers
solution1
1 2018-03-22 08:07:50
In your code you have to do some small changes to make it running.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
function openmd2(pnamea){
$('select[name=pname]').val(pnamea).change();
}
function addcname1(getval){
var myname = getval.getAttribute('value');
alert(myname)
}
Here I have just changed the $('select[name=pname]').val(pnamea) with $('select[name=pname]').val(pnamea).change(); to make it running
You can refer this like to get the exact answer https://jsfiddle.net/Sakshigargit15/j4ccdeaq/17/
solution2
0 2018-03-21 09:32:49
It will not give you an alert. Understand it this way.
1- By default, you will have value 1 selected from the first two lines of your function openmd2(pnamea) which will be called on your onLoad() .
2- Now in the third line, it gets a call to monitor for the onChange event.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
3- And hence moving forward, if you change the dropdown, you will get the alert. But not the first time (your onload ) since there are no listeners waiting for its change .
AFAIK, its working like you wrote it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.