Показывать только первый вариант в нескольких select

Question

Я изменил выбор на несколько вариантов и получал три отображаемых параметра. Я бы хотел получить только первый вариант. Как я могу это реализовать?

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

Это покажет следующим образом:

То, что я хотел бы показать, как это.

Когда оно щелкает, оно будет полностью расширяться, как это.

Answer 1

Вы можете использовать загрузочный класс selectpicker. Здесь работает фрагмент кода, который использует последние версии начальной загрузки плагинов

$('.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 2

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

Или вы можете использовать плагин MULTISELECT

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

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.