Default text which won't be shown in drop-down list
HtmlHtml SelectHtml Problem Overview
I have a select
which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.
How can I achieve this?
Html Solutions
Solution 1 - Html
Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML.
Adding a value of selected
to the item we want to appear as a header forces it to show in the first place as a placeholder.
Something like:
<option selected disabled>Choose here</option>
The complete markup should be along these lines:
<select>
<option selected disabled>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
You can take a look at this fiddle, and here's the result:
If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden
attribute like so:
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check the fiddle here and the screenshot below.
Solution 2 - Html
Here is the solution:
<select>
<option style="display:none;" selected>Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Solution 3 - Html
The proper and semantic way is using a placeholder label option:
- Add an
option
element as the first child of theselect
- Set
value
= ""
to thatoption
- Set the placeholder text as the content of that
option
- Add the
required
attribute to theselect
This will force the user to select another option in order to be able to submit the form, and browsers should render the option
as desired:
> If a select element contains a placeholder label option, the user > agent is expected to render that option in a manner that conveys that > it is a label, rather than a valid option of the control.
However, most browsers will render it as a normal option
. So we will have to do fix it manually, by adding the following to the option
:
- The
selected
attribute, to make it selected by default - The
disabled
attribute, to make it non-selectable by the user display: none
, to hide it from the list of values
select > .placeholder {
display: none;
}
<select required>
<option class="placeholder" selected disabled value="">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Solution 4 - Html
Because you can't use assign placeholders for select
tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:
<select>
<option disabled="disabled">Select language</option>
<option>Option 1</option>
</select>
"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.
I hope that helps.
Solution 5 - Html
Try this:
<div class="selectSelection">
<select>
<option>Do not display</option>
<option>1</option>
<option>1</option>
</select>
</div>
In the CSS:
.selectSelection option:first-child{
display:none;
}
Solution 6 - Html
I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:
HTML:
<span id="default_message_overlay">Default message</span>
<select id="my_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
CSS:
#default_message_overlay {
position: absolute;
display: block;
width: 120px;
color: grey;
}
select {
width: 150px;
}
Javascript (with JQuery):
$(document).ready(function() {
// No selection at start
$('#my_select').prop("selectedIndex", -1);
// Set the position of the overlay
var offset = $('#my_select').offset();
offset.top += 3;
offset.left += 3;
$('#default_message_overlay').offset(offset);
// Remove the overlay when selection changes
$('#my_select').change(function() {
if ($(this).prop("selectedIndex") != -1) {
$('#default_message_overlay').hide();
}
});
});
I've made a jsfiddle for demo. Tested with Firefox and IE8.
Solution 7 - Html
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
you can of course move the css to a css file if you want, and put a script to catch the esc
button to select the disabled again. Unlike the other similar answers I put value=""
, this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...};
and JSON.stringify(obj);
the value of prop will be null.
Solution 8 - Html
Op1:
$("#MySelectid option").each(function () {
if ($(this).html() == "text to find") {
$(this).attr("selected", "selected");
return;
}
});
Op2:
$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; }).attr('selected','selected');