How to Set placeholder to selectbox

Question

I have a selectbox. How can I set a text like a placeholder to my selectbox? I've added a selected disabled field to use like a place holder but when I added it all options are disappearing.

Here is my snippet:

window.onload = function () {
   $('#slide').editableSelect({ effects: 'slide' });
   $('#html').editableSelect();

   $('#onselect').editableSelect({
       onSelect: function (element) {
           $('#afterSelect').html($(this).val());
       }
   });
}

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;
}

<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>
<html>
<head>
</head>
<body>
<select id="slide">
   <option  selected="true" disabled>one</option>
 <option>one</option>
<option>two</option>
  <option>three</option>
</select>
</body>
</html>

Select boxes don't have placeholders. I don't understand what you're trying to do? — Tom, Oct 17 '16 at 13:27
@Tom i want to add a default text to my selectbox like placeholder — inaz, Oct 17 '16 at 13:32
possible duplicate: [HTML-select-how-to-set-default-text-which-wont-be-shown-in-drop-down-list](http://stackoverflow.com/questions/9447134/html-select-how-to-set-default-text-which-wont-be-shown-in-drop-down-list) — Kevin Kloet, Oct 17 '16 at 13:38
all option are disappearing, because you have selected `one`, you select box is like `Typeahead` — Abhishek Pandey, Oct 17 '16 at 13:45

score 2 · Answer 1 · edited Oct 17 '16 at 13:43

2

If I understand what you're trying to do, you can use this code:

Note the selected and disabled on the first option.

<select id="slide">
  <option disabled selected hidden>Please Choose</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

edited Oct 17 '16 at 13:43

Abhishek Pandey

13,302
8
38
68

answered Oct 17 '16 at 13:30

Tom

2,543
3
21
42

the code you have written is a basic kind of selectbox i want to add the place holder to this case – inaz Oct 17 '16 at 13:32
Yeah, there is a placeholder at the top with the text 'Please Choose'. – Tom Oct 17 '16 at 13:36

Abhishek Pandey · Accepted Answer · 2016-10-18T05:07:20.523

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>

Thank you so much for your help. – inaz Oct 18 '16 at 06:19 — inaz, Oct 18 '16 at 06:19

score 0 · Answer 3 · answered Feb 23 '18 at 19:26

0

You could just add 'placeholder' attribute to 'select' tag

answered Feb 23 '18 at 19:26

Vignesh

11
3

How to Set placeholder to selectbox

3 Answers3