onclick不适用于selectpicker multiselect下拉列表

Question

我有一个selectpicker multiselect下拉列表。 选择任何选项时，我将无法调用“ onclick”。 但这适用于普通的html多个下拉列表。 如何使其与selectpicker一起使用？

这是代码：

 <!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

我对下拉列表做了一些更改：

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

然后在下面修改您的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;
        }
    }
}

基本上，oldarr将存储所选项目的先前列表。 然后，我们将所选项目的最新列表插入newarr。 然后，我们比较新版本中的内容，而不是旧版本中的内容。 这样，我们可以只过滤出最新点击的项目。 如果用户取消选择一个项目，我们只将newarr分配给oldarr。

Answer 2

试试这个，使用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>

或使用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>

希望能帮助到:)

Answer 3

我已经使用jQuery来做到这一点。 因为您使用引导程序中的选择，它将作为列表而不是作为选项排序，这就是为什么它对您不起作用的原因

 $(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>

希望这可以帮助..！

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