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

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.

$('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>

You can use script in addition to this. You can use remove first child on mouse hover using jquery.

You can disable and pre select the default value. Then when user clicks cant re select this option.

<option selected="true" disabled="disabled">

Just create empty option's

<option value="" disabled selected>Select Category</option>
<option value="" disabled selected>Select Item</option>
<option value="" disabled selected>Select Vencdor</option>