onclick不與selectpicker multiselect下拉

我有一個selectpicker multiselect下拉列表。當我選擇任何選項時，我無法調用'onclick'。但這適用於正常的html多個下拉菜單。如何使它與selectpicker一起工作？onclick不與selectpicker multiselect下拉

下面的代碼：

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

來源

2017-07-04 coder1456

您是否嘗試過使用開發人員控制檯進行調試？ – Terrance00

是的，但我找不到任何消息。 – coder1456

如果您取消選擇某個元素，會發生什麼情況？ – C2486

我已經改變了下拉列表下方的一點：

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

來源

2017-07-04 07:30:11 Vlam

正如我在前面的回答中所提到的，您的答案部分適用。但我只想提醒所選的最新選項，而不是所選選項的列表。不過，我只能提醒最新的選項，但沒有selectpicker類。 – coder1456

已修改爲僅在最後點擊的項目上發出警報。 – Vlam

它的工作原理。這是我正在尋找的。謝謝！ – coder1456

我已經使用jQuery來做到這一點。因爲你使用select從引導，將訂購的列表不作爲選項，這就是爲什麼它沒有爲你

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

希望這有助於工作..！

來源

2017-07-04 07:21:59 Prags

您的代碼有效，但我正在尋找稍有不同的東西。如果您運行我的代碼，您可以看到我僅提醒所選的最新選項，但在您的答案中它將所有選定選項作爲列表返回。有沒有可能修改這個？ – coder1456

試試這個，使用的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發現：選擇

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

希望HEL p :)

來源

2017-07-04 08:17:55 GuaHsu

onclick不與selectpicker multiselect下拉

回答

相關問題