Javascript 单击“不使用选择器选择器多选”下拉列表_Javascript_Html

Javascript 单击“不使用选择器选择器多选”下拉列表

javascript html

Javascript 单击“不使用选择器选择器多选”下拉列表,javascript,html,Javascript,Html,我有一个选择器多选下拉列表。我无法在选择任何选项时调用“onclick”。但这适用于正常的html多重下拉列表。如何使用selectpicker使其工作代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale

我有一个选择器多选下拉列表。我无法在选择任何选项时调用“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>


沃尔沃汽车
宝马
欧宝
奥迪
按住Ctrl（windows）/Command（Mac）按钮以选择
多种选择
函数myFunction（选项）{
如果（选择选项）{
警报（option.text）；
}
}

我已经使用jQuery来实现这一点。由于您使用从引导选择，它将按列表而不是选项排序，这就是为什么它不适合您的原因

$（函数（）{
$（'.selectpicker'）。在（'change'，function（）上{
var selected=$（this）.find（“选项：selected”）.text（）；
警报（选定）；
});
});

沃尔沃汽车
宝马
欧宝
奥迪
按住Ctrl（windows）/Command（Mac）按钮以选择
多个选项。
我已将下拉列表更改如下：
<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>

基本上，oldarr将存储以前的选定项列表。然后我们将所选项目的最新列表插入newarr。然后我们比较新ARR中的内容，而不是旧ARR中的内容。这样我们就可以只过滤出最近点击的项目。如果用户取消选择某个项目，我们只需将newarr分配给oldarr。
尝试此操作，使用forEach查找所选选项

var-selectEl=document.querySelector（'.selectpicker'）；
var options=document.querySelectorAll（'.selectpicker option'）；
selectEl.addEventListener（'change'，function（）{
options.forEach（函数（选项）{
如果（option.selected）{alert（option.value）；}
})
})

沃尔沃汽车
宝马
欧宝
奥迪
您尝试过使用开发人员控制台进行调试吗？是的，但我在那里找不到任何消息。如果您取消选择某个元素会发生什么情况？@Rishi它不会调用任何警报，因为它被取消选择。您的代码可以工作，但我正在寻找一些稍微不同的东西。如果您运行我的代码，您可以看到我只提醒最新选择的选项，但在您的回答中，它会将所有选择的选项作为列表返回。可以修改吗？正如我在前面的回答中提到的，您的回答部分有效。但我只想提醒最新选定的选项，而不是所有选定选项的列表。不过，我只能在没有selectpicker类的情况下提醒最新的选项。我已修改为仅对上次单击的项目发出提醒。我已添加了对代码所做操作的简要说明。
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;
        }
    }
}