仅显示多个选择中的第一个选项

Question

我将选择更改为多个选项，并显示三个选项。我想只显示第一个选项。我该如何实现呢？

<select multiple>
    <option>Select</option>
    <option>100</option>
    <option>200</option>
    <option>300</option>
    <option>400</option>
    ...
</select>

这将显示如下：

我喜欢展示的是这样的。

单击时，它将完全展开。

Answer 1

＆＃13;

＆＃13;

<select multiple size="1">
    <option>Select</option>
    <option>100</option>
    <option>200</option>
    <option>300</option>
    <option>400</option>    
</select>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用多选插件

http://davidstutz.github.io/bootstrap-multiselect/#further-examples

Answer 2

您可以使用bootstrap selectpicker类。 这是使用最新版本的bootstrap插件的工作片段

 $('.selectpicker').selectpicker('val', 'Select');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
<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.12.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple>
        <option>Select</option>
        <option>100</option>
        <option>200</option>
        <option>300</option>
        <option>400</option>
    </select>

Answer 3

如果第三方是一种选择，我会选择select2。它会让您按照建议设计select，但其缺点是需要javascript。

$select2 = $(".js-example-basic-multiple").select2({
  placeholder: "Select"});

$('button.select-all').click(function(){
  $('select option').prop('selected', true);
  $select2.trigger('change')
});

$('button.select-none').click(function(){
  $('select option').prop('selected', false);
  $select2.trigger('change')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="js-example-basic-multiple" multiple="multiple" style="width:50%">
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
</select>

<button type="button" class="select-all">Select all</button>
<button type="button" class="select-none">Select none</button>

  

如何添加“全选”，“清除”选项？

根据docs：

  

用户可以一次删除多项选择中的所有选项吗？

     

这个问题的答案尚未写出来。你可以改进   这个文档通过创建一个带有答案的拉取请求   问题

所以你需要自己写点东西。我使用一些逻辑示例更新了代码，但您可能希望将其更多地集成到select-control中。