I am trying to make a dropdown list that contains a placeholder. It doesn't seem to support placeholder="stuff"
as other forms do. Is there a different way to obtain a placeholder in my dropdown?
This question is related to
html
twitter-bootstrap
placeholder
The right way to achieve what you are looking for is to use
title="Choose..."
for example:
<select class="form-contro selectpicker" name="example" title="Choose...">
<option value="all">All Affiliate</option>
</select>
check the documentation for more info about below ref
Here's another way to do it
<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" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.
Very useful, when you don't want to user field names or Labels.
I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as Select Box placeholder.
<select class="selectboxclass">
<option value="">- Please Select -</option>
<option value="IN">India</option>
<option value="US">America</option>
</select>
Make the first option disabled by JQuery.
<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>
This will make the first option of Dropdown as Placeholder and user will no longer able to select the first option.
Hope It helps!!
If you are initializing the select field through javascript, the following can be added to replace the default placeholder text
noneSelectedText: 'Insert Placeholder text'
example: if you have:
<select class='picker'></select>
in your javascript, you initialize the selectpicker like this
$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});
Bootstrap select has an noneSelectedText
option. You can set it via data-none-selected-text
attribute.
Documentation.
dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder
$('select').change(function() {_x000D_
if ($(this).children('option:first-child').is(':selected')) {_x000D_
$(this).addClass('placeholder');_x000D_
} else {_x000D_
$(this).removeClass('placeholder');_x000D_
}_x000D_
});
_x000D_
.placeholder{color: grey;}_x000D_
select option:first-child{color: grey; display: none;}_x000D_
select option{color: #555;} // bootstrap default color
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select class="form-control placeholder">_x000D_
<option value="">Your Placeholder Text</option>_x000D_
<option value="1">Text 1</option>_x000D_
<option value="2">Text 2</option>_x000D_
<option value="3">Text 3</option>_x000D_
</select>
_x000D_
if you want to see first option in list remove display property from css
All this options are.... improvisations. Bootstrap already offers a solution for this. If you want to change the placeholder for all your dropdown elements you can change the value of
noneSelectedText in the bootstrap file.
To change individualy, you can use TITLE parameter.
example:
<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>
For .html
page
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
for .jsp
or any other servlet page.
<select>
<option value="" selected="true" disabled="true">Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Create a label on top of the select
<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>
and apply CSS to place it on top
.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}
pointer-events: none
allows you to display the select when you click on the label, which is hidden when you select an option.
bootstrap-select.js
Find title: null,
and remove it.title="YOUR TEXT"
in <select>
element.Example:
<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
This is for Bootstrap 4.0, you only need to enter selected on the first line, it acts as a placeholder. The values are not necessary, but if you want to add value 0-... that is up to you. Much simpler than you may think:
<select class="custom-select">
<option selected>Open This</option>
<option value="">1st Choice</option>
<option value="">2nd Choice</option>
</select>
Using bootstrap, if you need to also add some values to the option to use for filters or other stuff you can simply add the class "bs-title-option" to the option that you want as a placeholder:
<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 adds this class to the title
attribute.
Most of the options are problematic for multi-select. Place Title attribute, and make first option as data-hidden="true"
<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>
Add hidden attribute:
<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
<option value="" defaultValue disabled> Something </option>
you can replace defaultValue
with selected
but that would give warning.
Try @title = "stuff". It worked for me.
Try this:
<select class="form-control" required>
<option value="" selected hidden>Select...</option>
when using required
+ value=""
then user can not select it
using hidden
will make it hidden from the options list, when the user open the options box
Using Bootstrap, This is what you can do. Using class "text-hide", the disabled option will be shown at first but not on the list.
<select class="form-control" >
<option selected disabled class="text-hide">Title</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Use 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>
Source: Stackoverflow.com