Bootstrap Select Dropdown List Placeholder


Answer :

Yes just "selected disabled" in the option.

<select>     <option value="" selected disabled>Please select</option>     <option value="">A</option>     <option value="">B</option>     <option value="">C</option> </select> 

Link to fiddle

You can also view the answer at

https://stackoverflow.com/a/5859221/1225125


Use hidden:

<select>     <option hidden >Display but don't show in list</option>     <option> text 1 </option>     <option> text 2 </option>     <option> text 3 </option> </select> 

dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder

    $('select').change(function() {      if ($(this).children('option:first-child').is(':selected')) {        $(this).addClass('placeholder');      } else {       $(this).removeClass('placeholder');      }     });
.placeholder{color: grey;} select option:first-child{color: grey; display: none;} select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control placeholder">    <option value="">Your Placeholder Text</option>    <option value="1">Text 1</option>    <option value="2">Text 2</option>    <option value="3">Text 3</option> </select>

if you want to see first option in list remove display property from css


Comments

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

C Perror Example

Converting A String To Int In Groovy