CODEWITHSUNDEEP
javascriptjqueryhtmlcss
inaz
inaz

Reputation: 1775

How to Set placeholder to selectbox

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>

Upvotes: 4

Views: 13423

Answers (3)

Vignesh
Vignesh

Reputation: 11

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

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

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>

Upvotes: 3

Tom
Tom

Reputation: 2645

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>

Upvotes: 2

Related Questions