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

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?