仅在单击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;
});

在这里查看样本

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

这个怎么做？。

 $('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插件。 在这种情况下非常有帮助，并且高度可配置。

 $('select').select2({ placeholder: "Select an option", allowClear: true }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <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.min.js"></script> <label>Dropdown :</label> <select id="dropdown" multiple="multiple" style="width: 150px"> <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> 

Answer 2

它可能满足您的要求。 但是您需要链接这些库。

Bootstrap Multiselect文档。

  <script src="https://cdnjs.cloudflare.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-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> <script type="text/javascript"> $(document).ready(function() { $('#dropdown').multiselect({ includeSelectAllOption: true, nonSelectedText: 'Please Select', selectAllText: 'Please Select' }); }); </script> <label>Dropdown :</label> <select multiple="multiple" id="dropdown"> <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> <style type="text/css"> .multiselect-container *{ outline: none !important; } .multiselect-container>li>a>label>input[type=checkbox] { visibility: hidden; } .multiselect-container>li>a>label { padding: 5px; } </style> 

Answer 3

您可以使用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>