Select с множественным выбором

289

31 января 2018, 12:54

Нужно написать выпадающий список, так чтобы пользователь мог отметить несколько значений.

<select multiple="multiple" id="admission" name="admission[]" id="select" class="select"> 
  <option disabled>Выберите</option> 
  <option value="XXX1">XXX1</option> 
  <option value="XXX2">XXX2</option> 
  <option value="XXX3">XXX3</option> 
  <option value="XXX4">XXX4</option> 
</select>

Такое решение срабатывает только если зажать клавиши ctrl/shift, это не очень удобно. есть решение чтобы можно было просто щелкать по пунктам списка и эти значения оставались выбранными? Либо сделать такой выпадающий список , где пункты можно отмечать галочками.

Answer 1

В бутстрапе есть такое решение. Вот примеры с самого сайта.

Подключите bootstrap к сайту.

И еще одно. Корректная версия для работы плагина bootstrap 3.3.2.

На Bootstrap 4 нужно переделать.

$(document).ready(function() { 
    $('#example-getting-started').multiselect(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
<link rel="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
<select id="example-getting-started" multiple="multiple"> 
    <option value="cheese">Cheese</option> 
    <option value="tomatoes">Tomatoes</option> 
    <option value="mozarella">Mozzarella</option> 
    <option value="mushrooms">Mushrooms</option> 
    <option value="pepperoni">Pepperoni</option> 
    <option value="onions">Onions</option> 
</select>