Заполнитель раскрывающегося списка Bootstrap


104

Я пытаюсь создать раскрывающийся список, содержащий заполнитель. Кажется, он не поддерживает, placeholder="stuff"как другие формы. Есть ли другой способ получить заполнитель в раскрывающемся списке?

Ответы:


227

Да просто "выбран отключен" в опции.

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Ссылка на скрипку

Вы также можете посмотреть ответ на

https://stackoverflow.com/a/5859221/1225125


4
Это не отвечает на вопрос, поскольку он / она просит встроенное решение начальной загрузки
Мехди

5
Также можно использовать disabled selected hiddenили только hiddenвсе верные. :)
MD Ashik

60

Использовать скрытый:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

продолжить с последнего комментария, при использовании v-модели необходимо использовать следующее: <option: value = "null" disabled hidden> Select Age </option>
Homer

16

раскрывающийся список или выбор не имеют заполнителя, потому что HTML не поддерживает его, но можно создать такой же эффект, чтобы он выглядел так же, как и другие заполнители входных данных

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

если вы хотите увидеть первую опцию в списке, удалите свойство отображения из css


8
Вы написали тонну собственного кода, когда добавление класса «selected disabled» - то же самое.
Jordan.JD

2
К его чести, он немного более визуально завершен (с большим количеством кода), где заполнитель не отображается в выбранном списке. Хотя я придерживаюсь минимального кода.
Roadkillnz

8

Если вы инициализируете поле выбора с помощью javascript, можно добавить следующее, чтобы заменить текст заполнителя по умолчанию

noneSelectedText: 'Insert Placeholder text'

пример: если у вас есть:

<select class='picker'></select>

в вашем javascript вы инициализируете selectpicker следующим образом

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

6

Большинство опций проблематично для множественного выбора. Поместите атрибут Title и сделайте первый вариант как data-hidden = "true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

5

Добавить скрытый атрибут:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Как это отличается от ответа Джей Лин и ответ Brakke в ?
Athafoud

1
Это сработало для меня лучше всего, потому что selected означает, что он выбран по умолчанию, отключен, поэтому его нельзя щелкнуть, и скрыт в раскрывающемся списке. Я действительно полагаю, что если используется скрытый, отключенный, вероятно, не должен быть там.
aspergillusOryzae

4

Попробуй это:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

при использовании required+ value=""пользователь не может выбрать его, используя, он hiddenбудет скрыт в списке параметров, когда пользователь откроет окно параметров


настоятельно рекомендуется!
Aqua 4,


2

Все это варианты .... импровизации. Bootstrap уже предлагает решение для этого. Если вы хотите изменить заполнитель для всех раскрывающихся элементов, вы можете изменить значение

noneSelectedText в файле начальной загрузки.

Чтобы изменить индивидуальность, вы можете использовать параметр TITLE.

пример:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

Вы, сэр, только что спасли меня. Все вышеперечисленные параметры не работали для множественного выбора. Поскольку выбор не отменял предыдущие значения. Название сработало для меня
Faran Khan

1
  1. в bootstrap-select.jsНайдите title: null, и удалите.
  2. добавить title="YOUR TEXT"в <select>элемент.
  3. Хорошо :)

Пример:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

1

Я думаю, что раскрывающееся меню с классом и кодом JQuery для отключения первой опции для выбора пользователем будет отлично работать как заполнитель Select Box .

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Отключите первую опцию JQuery.

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

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

Надеюсь, поможет!!


0

Вот еще один способ сделать это

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

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

Очень полезно, когда вы не хотите использовать имена полей или метки.


0

Это то, что вы можете сделать с помощью Bootstrap. При использовании класса «text-hide» отключенная опция сначала будет отображаться, но не в списке.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>


0

Для .htmlстраницы

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

для .jspили любой другой страницы сервлета.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

0

Используя bootstrap, если вам нужно также добавить некоторые значения к параметру, который будет использоваться для фильтров или других вещей, вы можете просто добавить класс «bs-title-option» к параметру, который вы хотите использовать в качестве заполнителя:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap добавляет этот класс к titleатрибуту.


0

Решение для Angular 2

Создайте ярлык поверх выбранного

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

и примените CSS, чтобы разместить его сверху

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none позволяет отображать выбор при нажатии на метку, которая скрывается при выборе параметра.


0
<option value="" defaultValue disabled> Something </option>

вы можете заменить defaultValueна, selectedно это даст предупреждение.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.