Возможно ли использовать атрибут select-size в сочетании с bootstrap-select? - PullRequest
Новая
       22

Возможно ли использовать атрибут select-size в сочетании с bootstrap-select?

0 голосов
/ 03 мая 2019

... и если да, то как? У меня есть элемент select в сочетании с атрибутом size, т.е. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<select class="form-control" size="5">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
</select>

Теперь я хочу добавить дополнительную информацию к опциям - bootstrap-select может выполнить эту работу, но игнорирует атрибут select-size-attribute / throws: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<select size="5" class="selectpicker" data-show-subtext="true">
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
</select>

РЕДАКТИРОВАТЬ: я забыл сказать, что я знаю атрибут «data-size» - конечно, это работает, но у меня все еще есть раскрывающийся список. Я добился того, чтобы у меня была коробка, как в моем первом примере, но с элементами стиля, как во втором.

Если задание не может быть выполнено с помощью bootstrap-select, альтернативы приветствуются.

Ответы [ 2 ]

1 голос
/ 03 мая 2019

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<select class="custom-select form-control" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="3">Three</option>
</select>
0 голосов
/ 03 мая 2019

Вы можете использовать размер данных вместо размера или можете добавить это. 

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select size="5" class="selectpicker" data-show-subtext="true">
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>


<script>
  $('.selectpicker').selectpicker();
</script>
...