Bootstrap выберите раскрывающийся список заполнителя

74

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

Теги:
placeholder

16 ответов

169
Лучший ответ

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

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

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

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

https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box

  • 4
    Это не отвечает на вопрос, поскольку он / она просит встроенное решение для начальной загрузки
  • 3
    Также Вы можете использовать disabled selected hidden или только hidden все верно. :)
33

Использование скрытых:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>
  • 0
    Благодарю. Именно то, что мне нужно!
  • 0
    да отлично работает
Показать ещё 2 комментария
15

В раскрывающемся списке или в списке выбора нет заполнителя, потому что 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>

если вы хотите увидеть первый вариант в списке, удалите свойство display из css

  • 8
    Вы написали тонну пользовательского кода, когда добавление «выбранного отключенного» класса - это то же самое.
  • 2
    К его чести, он немного более визуально завершен (с большим количеством кода), где заполнитель не отображается в списке выбора. Хотя я собираюсь придерживаться минимального кода.
4

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

noneSelectedText: 'Insert Placeholder text'

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

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

в вашем javascript вы инициализируете селектор выбора вот так

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

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

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>
  • 0
    Чем это отличается от ответа Джея Линя и ответа Бракке ?
  • 0
    Это работает лучше всего для меня, потому что выбрано означает, что оно выбрано по умолчанию, отключено, поэтому его нельзя щелкнуть и скрыть из выпадающего списка. Я предполагаю, что если скрытый используется, отключенный, вероятно, не должен быть там.
3

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

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

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

1

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

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

Все эти варианты... импровизации. 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>
  • 0
    Вы, сэр, только что спасли меня. Все вышеперечисленные варианты не работают для мультиселекции. В качестве выбора не было отмены выбора предыдущих значений. Название работает для меня
1

Попробуйте @title= "stuff". Это сработало для меня.

  • 1
    Пример подошел бы идеально
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

Я думаю, что выпадающий список с классом и кодом 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>

Это сделает первый вариант Dropdown как Placeholder, и пользователь больше не сможет выбирать первый вариант.

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

0
  • in bootstrap-select.js Найти title: null, и удалить его.
  • добавить title="YOUR TEXT" в элемент <select>.
  • Изобразительное:)

Пример:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">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 есть опция noneSelectedText. Вы можете установить его с помощью атрибута data-none-selected-text. Документация.

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

Здесь другой способ сделать это

<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" гарантирует, что пользователь должен выбрать один из вариантов.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню