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

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

怎么做？。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我建议使用select2插件。在这种情况下非常有用并且高度可配置。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

它可能符合您的要求。但是你需要链接这些库。

Bootstrap Multiselect Documentation.

＆＃13;

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

＆＃13;

Answer 3

您可以使用Select2

TextView.setText(GenericMethodToCheckString(meaningList.get(index)));

$(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%;
}

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

3 个答案: