Twitter Bootstrap Question posted in

Not able to fire onchange event dynamically from javascript after selecting options of bootstrap selectpicker-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search