CODEWITHSUNDEEP
phphtml
user6369806
user6369806

Reputation:

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.

Upvotes: 0

Views: 370

Answers (4)

Suman Kalyan
Suman Kalyan

Reputation: 480

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

Upvotes: 0

Tusk
Tusk

Reputation: 1727

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>

Upvotes: 0

Jesus Segnini
Jesus Segnini

Reputation: 355

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

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

Upvotes: 0

Roushan Choudhary
Roushan Choudhary

Reputation: 24

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

Upvotes: 0

Related Questions