Подтвердить что ты не робот

Бутстрап выберите выпадающий список

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

fooobar.com/questions/11215/...

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

noneSelectedText: 'Insert Placeholder text'

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Все эти варианты... импровизации. 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>

Ответ 9

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

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

Ответ 10

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

Ответ 11

Я думаю, что выпадающий список с классом и кодом 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, и пользователь больше не сможет выбирать первый вариант.

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

Ответ 12

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

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

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

Ответ 13

Использование 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>

Ответ 14

У выбора Bootstrap есть опция noneSelectedText. Вы можете установить его с помощью атрибута data-none-selected-text. Документация.

Ответ 15

Для .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>

Ответ 16

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

Ответ 17

Решение для 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 позволяет вам отображать выбор, когда вы нажимаете на метку, которая скрыта, когда вы выбираете опцию.

angular html css

Ответ 18

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

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