I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo
Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
Didn't how to put this question... How can I show a descrition / deafukt value without it being an options.
Eg:
<select class="form-control">
<option value="">Choose a Number...</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
How to show "Choose a Number" in unselected mode but not have it as an option. Like dropdown should show only the options which can be selected.
The select tag doesn't come with a placeholder attribute. To work around that you can do the following:
HTML:
<select>
<option class="hidden_option" selected disabled>Choose a number</option>
<option>1</option>
<option>2</option>
</select>
CSS:
select > option.hidden_option{
display: none;
}
This way you can make a pseudo-placeholder that will not be listed as an option.
Here is a JsFiddle demo for you to see it in action
I have a select dropdown menu and I want the placeholder text to read 'Position'
<select id="playingPosition" value="Position">
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
When the page loads, 'Goalkeeper' will be displayed before any user input. I have tried to rename this to 'Position' using the value attribute.
http://jsfiddle.net/bHJM2/
You can do something like this:
<option value="" disabled selected>Select your option</option>
This becomes:
<select name="playingPosition" id="playingPosition" value="Position">
<option value="" disabled selected>Select your option</option>
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
Looks like:
And we're done.
Set the selected attribute on the option element you want to select like this:
<option value="defender" selected>Defender</option>
How would I go about setting a title in select tag? Here is my select box:
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
When I visit the site, by default it shows "Sydney". But I want to display a title, such as, "What is the name of your city?"
<select>
<option selected disabled>Choose one</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
Using selected and disabled will make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:
<select>
<optgroup label = "Choose One">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</optgroup>
</select>
You can combine it with selected and hidden
<select class="dropdown" style="width: 150px; height: 26px">
<option selected hidden>What is your name?</option>
<option value="michel">Michel</option>
<option value="thiago">Thiago</option>
<option value="Jonson">Jonson</option>
</select>
Your dropdown title will be selected and cannot chose by the user.
You can use the following
<select data-hai="whatup">
<option label="Select your city">Select your city</option>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
I think that this would help:
<select name="select_1">
<optgroup label="First optgroup category">
<option selected="selected" value="0">Select element</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</optgroup>
<optgroup label="Second optgroup category">
<option value="5">Option 4</option>
<option value="6">Option 5</option>
<option value="7">Option 6</option>
</optgroup>
</select>
<option value="" selected style="display:none">Please select one item</option>
Using selected and using display: none; for hidden item in list.
You can add an option tag on top of the others with no value and a prompt like this:
<select>
<option value="">Choose One</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
Or leave it blank instead of saying Choose one if you want.
Typically, I would suggest that you use the <optgroup> option, as that gives some nice styling and indenting to the element.
The HTML element creates a grouping of options within a element. (Source: MDN Web Docs: <optgroup>.
But, since an <optgroup> cannot be a selected value, you can make an <option selected disabled> and then stylize it with CSS so that it behaves like an <optgroup>....
.optionGroup {
font-weight: bold;
font-style: italic;
}
<select>
<option class="optionGroup" selected disabled>Choose one</option>
<option value="sydney" class="optionChild"> Sydney</option>
<option value="melbourne" class="optionChild"> Melbourne</option>
<option value="cromwell" class="optionChild"> Cromwell</option>
<option value="queenstown" class="optionChild"> Queenstown</option>
</select>
With a default option having selected attribute
<select>
<option value="" selected>Choose your city</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
The first option's text will always display as default title.
<select>
<option value ="">What is the name of your city?</option>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
You can create dropdown title | label with selected, hidden and style for old or unsupported device.
<select name="city" >
<option selected hidden style="display:none">What is your city</option>
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
<option value="4">Queenstown</option>
</select>
I added a <div> and it worked fine
<div title="Your title here!">
<select>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
</div>
<select name="city">
<option value ="0">What is your city</option>
<option value ="1">Sydney</option>
<option value ="2">Melbourne</option>
<option value ="3">Cromwell</option>
<option value ="4">Queenstown</option>
</select>
You can use the unique id for the value instead