onclick not working with selectpicker multiselect dropdown

Question

I have a selectpicker multiselect dropdown. I'm not able to invoke 'onclick' when I select any option. But this works with the normal html multiple dropdown. How to make it work with selectpicker?

Here's the code:

 <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <link rel="stylesheet" 
       href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
       select/1.6.3/css/bootstrap-select.min.css" />
       <link rel="stylesheet" href="https:
       //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <script 
         src=
         "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
       </script>
       <script 
         src= 
       "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 >
       </script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
         select/1.6.3/js/bootstrap-select.min.js"></script>
     </head>
     <body>

       <form action="/action_page.php">
         <select class="selectpicker" name="cars"  multiple>
         <option value="volvo" onclick="myFunction(this)">Volvo</option>
         <option value="bmw" onclick="myFunction(this)">Bmw</option>
         <option value="opel" onclick="myFunction(this)">Opel</option>
         <option value="audi" onclick="myFunction(this)">Audi</option>
         </select>
         <input type="submit">
       </form>

       <p>Hold down the Ctrl (windows) / Command (Mac) button to select 
        multiple options.</p>

       <script type="text/javascript">
         function myFunction(option) {

           if (option.selected) {
             alert(option.text);
           }
         }

       </script>
   </body>

 </html>

Answer 1

I have changed the dropdownlist a bit below:

<select class="selectpicker" onchange="myFunction()" id="cars" name="cars"  multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

Then modified your myFunction below:

var oldarr = [];
var newarr = [];
function myFunction() {
    if ($("#cars option:selected").length == 1) {
        oldarr = [];
        oldarr.push($("#cars option:selected").val());
        alert($("#cars option:selected").val());
    }
    else {
        newarr = [];
        $("#cars option:selected").each(function(i){
            newarr.push($(this).val());
        });
        newitem = $(newarr).not(oldarr).get();
        if (newitem.length > 0) {
            alert(newitem[0]);
            oldarr.push(newitem[0]);
        }
        else {
            oldarr = newarr;
        }
    }
}

Basically, the oldarr will store the previous list of selected items. Then we insert the latest list of selected items into newarr. Then we compare what is in the newarr but not in the oldarr. This way we can filter out only the latest clicked item. If the user deselects an item instead, we just assign the newarr to oldarr.

Answer 2

try this, use forEach to find selected option

 var selectEl = document.querySelector('.selectpicker'); var options = document.querySelectorAll('.selectpicker option'); selectEl.addEventListener('change', function() { options.forEach(function(option) { if(option.selected) { alert(option.value); } }) })

 <select class="selectpicker" name="cars" multiple> <option value="volvo">Volvo</option> <option value="bmw">Bmw</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

or use jQuery find :select

 $('.selectpicker').change(function() { var thisValue = $(this).find(':selected').attr('value') ; alert(thisValue); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select class="selectpicker" name="cars" multiple> <option value="volvo">Volvo</option> <option value="bmw">Bmw</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

Hope help :)

Answer 3

I have used jQuery to do this. since you use select from bootstrap, it will ordered as list not as options, thats why it didnt worked for you

 $(function() { $('.selectpicker').on('change', function(){ var selected = $(this).find("option:selected").text(); alert(selected); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> <form action="/action_page.php"> <select class="selectpicker" name="cars" multiple> <option value="volvo" >Volvo</option> <option value="bmw">Bmw</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <input type="submit"> </form> <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

Hope this helps..!

onclick not working with selectpicker multiselect dropdown

Question

3 answers

solution1
2 ACCPTED 2017-07-04 07:30:11

solution2
1 2017-07-04 08:17:55

solution3
0 2017-07-04 07:21:59

onclick not working with selectpicker multiselect dropdown

Question

3 answers

solution1 2 ACCPTED 2017-07-04 07:30:11

solution2 1 2017-07-04 08:17:55

solution3 0 2017-07-04 07:21:59

solution1
2 ACCPTED 2017-07-04 07:30:11

solution2
1 2017-07-04 08:17:55

solution3
0 2017-07-04 07:21:59