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

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

15 ответов


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

<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


использовать hidden:

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

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

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


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

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

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

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

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


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

noneSelectedText: 'Insert Placeholder text'

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

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

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

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

попробуйте @title = "stuff". У меня получилось.


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

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>

большинство параметров проблематичны для multi-select. Поместите атрибут Title и сделайте первый вариант как Data-hidden= "true"

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

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

<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>

" Choose Platform "становится заполнителем, а свойство "required" гарантирует, что пользователь должен выбрать один из параметров.

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


используя 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>

Bootstrap select имеет . Вы можете установить его через


на .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>

  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>

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

<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>

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

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