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

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable