Vineet Basantani Vineet Basantani - 6 months ago 18
HTML Question

How do I keep a placeholder for my drop down menu as the first visible value?

I don't want it as a label.
Something like this:
enter image description here

But this 'value' should go away as soon as I click on it once and the actual values should start showing.

Answer

$('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('ddplaceholder');
     } else {
      $(this).removeClass('ddplaceholder');
     }
    });
.ddplaceholder{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>
<form>
<select class="form-control ddplaceholder">
   <option value="">Type your own text</option>
   <option value="1">example 1</option>
   <option value="2">example 2</option>
   <option value="3">example 3</option>
</select>
</form>

You need to add some jQuery/See the below example.This is what you want.