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