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

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Change The Font Size Of Visual Studio Solution Explorer