I'm wondering how to achieve the placeholder
effect with the select
tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset> <select data-placeholder="Please select a product" id="s1" class="global"> <option value="Some">Some</option> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> </fieldset>
2)
<fieldset> <select id="s1" class="global"> <option data-placeholder="true" value="Some">Some</option> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> </fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected
because it will still be showed in the drop-down list with the other items.
There is no placeholder attribute in 'select' tag but it can make the placeholder for a 'select' box. There are many ways to create the placeholder for a 'select' box.
There is no attribute like input's placeholder for select box dropdown. However, you can create similar effect by using the HTML disabled and selected attribute on a <option> element that has empty value.
Definition and Usage The placeholder attribute specifies a short hint that describes the expected value of a input field / textarea. The short hint is displayed in the field before the user enters a value.
You can add a placeholder tag in the design and specify tag="dn" to render the distinguished name of the user.
Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select> <option value="" selected>Please select</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select>
Hidden placeholder:
<select class="empty"> <option value="" selected disabled>Please select</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select>
CSS to change the colour of the first item:
select option { color: black; } select option:first-child { color: grey; } select.empty { color: grey; } /* Hidden placeholder */ select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option $("select:has(option[value=]:first-child)").on('change', function() { $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0); }).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With