如何将下拉菜单的占位符作为第一个可见值？

Question

I don't want it as a label. Something like this:

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

Answer 1

$('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 above example.This is what you want.

</div>