How to Make a Placeholder For a 'Select' Box

How do I make a placeholder for a 'select' box?

A non-CSS - no JavaScript/jQuery answer:

<label>Option name
<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
</label>

placeholder for select tag

EDIT: This did/does work at the time I wrote it, but as Blexen pointed out, it's not in the spec.

Add an option like so: 

<option default>Select Your Beverage</option>

The correct way:

<option selected="selected">Select Your Beverage</option>

A Placeholder for the `select` tag?

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

How do I make Placeholder for select box that has values in javascript?

you can do that: (?)

var currentRank = 
    { iron    : { '1':   0, '2':  11, '3':  19 } 
    , bronze  : { '1':  28, '2':  42, '3':  56 } 
    , silver  : { '1':  69, '2':  85, '3': 102 } 
    , gold    : { '1': 118, '2': 140, '3': 161 } 
    , plat    : { '1': 182, '2': 211, '3': 240 } 
    , diamond : { '1': 276, '2': 311, '3': 351 } 
    , imortal : { '1': 406, '2': 499, '3': 591 } 
    };

const myForm = document.forms['my-form']
  ;
function setSelect( xSlct, arr )
  {
  xSlct.innerHTML = '' // clear all options
  let ph = new Option(xSlct.dataset.placeholder , '', true, true )
  xSlct.add( ph )
  arr.forEach(el => xSlct.add(new Option( el , el )) )
  ph.disabled = true
  }

setSelect( myForm.rank1, Object.keys(currentRank))

setSelect( myForm.devision1, Object
                          .values(currentRank)
                          .map(Object.keys)
                          .flat()
                          .filter((v,i,t)=>t.indexOf(v)===i))
<form action="xxx" name="my-form" >
  <select name="rank1" data-placeholder="<< Rank >>"></select>
  <select name="devision1" data-placeholder="<< Devision >>"></select>
</form>

Having a placeholder in a Select option

I think this is what you want .

HTML:

<select id="choice">
  <option value="0" selected="selected">Choose...</option>
  <option value="1">Something</option>
  <option value="2">Something else</option>
  <option value="3">Another choice</option>
</select>

CSS :

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
  if($(this).val() == "0") $(this).addClass("empty");
  else $(this).removeClass("empty")
});

$("#choice").change();

try this jsfiddle.

How to Set placeholder to selectbox

This is not select box its a type head, If you can see there is an input box in DOM with slide. So you can add placeholder into input#slide.

You can try this code,

$(document).ready(function(){
  $('#slide').attr("placeholder", "One");
})

window.onload = function () {   $('#slide').editableSelect({ effects: 'slide' });   $('#html').editableSelect();
   $('#onselect').editableSelect({       onSelect: function (element) {           $('#afterSelect').html($(this).val());       }   });}
$(document).ready(function(){  $('#slide').attr("placeholder", "One");})
input.es-input {  padding-left:20px!important;  direction:rtl;  background-color:#FFF !important;  border:1px solid #ccc !important;  height:40px !important;cursor:pointer;  background-position:5% !important;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) left center no-repeat}
.es-list {  position:absolute;  padding:0;  margin:0;  border:1px solid #d1d1d1;  display:none;  z-index:1000;  background:#fff;  max-height:160px;  overflow-y:auto;-moz-box-shadow:0 2px 3px #ccc;-webkit-box-shadow:0 2px 3px #ccc;  box-shadow:0 2px 3px #ccc}
.es-list li{  display:block;  height:45px;  padding:0 !important;  margin:0 !important;  width:100%;}
.es-list li.selected {  background:#2476bb;color:#fff;}
<select id="slide">    <option>one</option>    <option>two</option>    <option>three</option>  </select><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select/source/jquery.editable-select.js"></script>

How to Set Placeholder on Select Tag in Angular 8?

Set initial value of month = null in the component.ts and add [(ngModel)]="month" in the select tag of component.html.

component.ts

month = null;

component.html 

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select name="month" [(ngModel)]="month" #month required>
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

How to make placeholder for the select option but it has loop value?

Understanding your requirement, you need to have a placeholder in your select. If you use innerHTML, it will wipe out the whole.

You can use insertAdjacentHTML, like

document.getElementById("idBulanBerlaku").insertAdjacentHTML("beforeend", options);

or just below if you wish to keep using innerHTML

document.getElementById("idBulanBerlaku").innerHTML += options;

var start = 2010;var end = 2030;var options = "";for (var year = start; year <= end; year++) {  options += "<option>" + year + "</option>";}document.getElementById("idBulanBerlaku").insertAdjacentHTML("beforeend", options);
<div class="form-group">  <div class="col-sm-12">    <select class="form-control" id="idBulanBerlaku">      <option value="" disabled selected hidden>Please Choose...</option>    </select>  </div></div>

How do I make a placeholder for a 'select' multiple box using bootstrap-select?

It's with the title attribute

Documentation: https://developer.snapappointments.com/bootstrap-select/examples/#placeholder

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<select class="selectpicker" title="Type" multiple>  <option value="">Type 1</option>  <option value="">Type 2</option>  <option value="">Type 3</option>  <option value="">Type 4</option></select>

How do I make a placeholder for a 'select' box?

A non-CSS - no JavaScript/jQuery answer:

<label>Option name
<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
</label>

Related Topics

Print Page Numbers on Pages When Printing HTML

Want to Make Font Awesome Icons Clickable

Add Line Break Within Tooltips

Next.Js Background-Image CSS Property Cant Load the Image

How to Stop Background from Jumping to the Top on Modal Toggle

Css - How to Have Swiper Slider Arrows Outside of Slider That Takes Up 12 Column Row

How to Display Dynamic Json Data in HTML Using Angular 6

How to Create an HTML Table With a Fixed/Frozen Left Column and a Scrollable Body

How to Declare a Variable in a Template in Angular

Woocommerce Change Product Image on Hover With CSS

Responsive Fullscreen Youtube Video With No Black Bars

Why Align Items Center Not Working

How to Make Bootstrap 4 Cards the Same Height in Card-Columns

First Name Validation Using HTML 5 Pattern

Html Wont Link to CSS File in Visual Studio Code

Select Option Padding Not Working in Chrome

How to Pass Boolean Variable of False in a Url

How to Override Bootstrap CSS Styles


Leave a reply



Submit