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中的内容。这样我们只能过滤掉最新点击的项目。如果用户改为取消选择项目，我们只需将newarr分配给oldarr。

Answer 2

我使用jQuery来做到这一点。因为你使用select from bootstrap，它会以列表的形式排序而不是选项，这就是为什么它不适合你

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会有所帮助..！

Answer 3

试试这个，使用forEach找到所选的选项

＆＃13;

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); }
    })
})

＆＃13;

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

＆＃13;

或使用jQuery find：select

＆＃13;

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

＆＃13;

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

＆＃13;

希望帮助：）

onclick无法使用selectpicker multiselect下拉列表

3 个答案: