Я пытаюсь создать раскрывающийся список, содержащий местозаполнитель. Кажется, он не поддерживает placeholder="stuff"
, как это делают другие формы. Есть ли другой способ получить местозаполнитель в моем выпадающем списке?
Да, в опции выбрано "отключено".
<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
Использование скрытых:
<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 не поддерживает его, но можно создать тот же эффект, чтобы он выглядел так же, как и другие входные заполнители
$('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
Если вы инициализируете поле выбора с помощью javascript, можно заменить следующее, чтобы заменить текст заполнителя по умолчанию
noneSelectedText: 'Insert Placeholder text'
пример: если у вас есть:
<select class='picker'></select>
в вашем javascript вы инициализируете селектор выбора вот так
$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});
Добавить скрытый атрибут:
<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
, сделает его скрытым из списка параметров, когда пользователь откроет окно параметров
Большинство вариантов проблематично для множественного выбора. Поместите атрибут "Заголовок" и укажите в качестве первого параметра data-hidden = "true"
<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>
Все эти варианты... импровизации. 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>
Попробуйте @title= "stuff". Это сработало для меня.
Используя 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
.
Я думаю, что выпадающий список с классом и кодом 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, и пользователь больше не сможет выбирать первый вариант.
Надеюсь, поможет!!
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>
Для .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>
У выбора Bootstrap есть опция noneSelectedText
. Вы можете установить его с помощью атрибута data-none-selected-text
.
Документация.
Использование 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>
Здесь другой способ сделать это
<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" гарантирует, что пользователь должен выбрать один из вариантов.
Очень полезно, когда вы не хотите, чтобы имена полей пользователя или ярлыки не были.
disabled selected hidden
или толькоhidden
все верно. :)