javascript - 仅在单击 javascript 时显示选项下拉列表

Question

我有如下所示的代码

<label>Dropdown :</label>
<select multiple="multiple" id="dropdown">
<option selected="selected" value="">Please Select</option>
    <option id="1">Opt 1  </option>
    <option id="2">Opt 2  </option>
    <option id="3">Opt 3  </option>
    <option id="4">Opt 4  </option>
</select>

在 JS 中

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var values = $('#dropdown').val();
    alert(values);
    return false;
});

查看示例 here

这会产生一个下拉列表已经展开的输出。但我希望下拉列表仅在单击时展开，允许选择多个选项并在下拉列表中显示所有选定值，并使用逗号分隔值。

如何做到这一点？

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var values = $('#dropdown').val();
    alert(values);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Dropdown :</label>
<select multiple="multiple" id="dropdown">
<option selected="selected" value="">Please Select</option>
    <option id="1">Opt 1  </option>
    <option id="2">Opt 2  </option>
    <option id="3">Opt 3  </option>
    <option id="4">Opt 4  </option>
</select>

编辑:我发现@bRIMOs 和@AdhershMNair 的回答非常有帮助。他们使用不同的插件来实现具有不同 UI 的相同标准。由于他们的耐心和意愿，我发现这非常有帮助并从他们那里学到了更多。

Answer 1

您可以使用 Select2

$(function(){
   $("#dropdown2").select2({
    "language": {
         "noResults": function(){
             return "Please select";
         }
     }
  });
  
  $("#dropdown").select2({
    "language": {
         "noResults": function(){
             return "Please select";
         }
     }
  });
  
  $("#dropdown").on("select2:select",function(e){
    var values = $(this).select2("val");
    if(values.indexOf("Clear All")!=-1)
       $(this).select2("val","All");
    else
    alert(values.join(","));
  });
  $("#dropdown").on("select2:unselect",function(e){
    var values = $(this).select2("val");
    if(values) alert(values.join(","));
  })
  
  $("#dropdown").on("change",function(e){
    var values = $(this).select2("val");
    if(values) console.log("Using Change event :",values.join(","));
  })
});

#dropdown ,#dropdown2 {
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<label>Dropdown :</label>
<select multiple="multiple" id="dropdown">
    <option>Clear All</option>
    <option id="1">Opt 1  </option>
    <option id="2">Opt 2  </option>
    <option id="3">Opt 3  </option>
    <option id="4">Opt 4  </option>
</select>
<br><br>
<label>Dropdown<br> with no data :</label>
<select multiple="multiple" id="dropdown2">
    
</select>