onclick不适用于selectpicker multiselect下拉列表

Question

I have a selectpicker multiselect dropdown. 我有一个selectpicker multiselect下拉列表。 I'm not able to invoke 'onclick' when I select any option. 选择任何选项时，我将无法调用“ onclick”。 But this works with the normal html multiple dropdown. 但这适用于普通的html多个下拉列表。 How to make it work with selectpicker? 如何使其与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: 然后在下面修改您的myFunction：

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. 基本上，oldarr将存储所选项目的先前列表。 Then we insert the latest list of selected items into newarr. 然后，我们将所选项目的最新列表插入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. 如果用户取消选择一个项目，我们只将newarr分配给oldarr。

Answer 2

try this, use forEach to find selected option 试试这个，使用forEach查找所选选项

 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 或使用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. 我已经使用jQuery来做到这一点。 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不适用于selectpicker multiselect下拉列表

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-07-04 07:30:11

解决方案2
1 2017-07-04 08:17:55

解决方案3
0 2017-07-04 07:21:59

onclick不适用于selectpicker multiselect下拉列表

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-07-04 07:30:11

解决方案2 1 2017-07-04 08:17:55

解决方案3 0 2017-07-04 07:21:59

解决方案1
2 已采纳 2017-07-04 07:30:11

解决方案2
1 2017-07-04 08:17:55

解决方案3
0 2017-07-04 07:21:59