CODEWITHSUNDEEP
jqueryhtmlcss
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

How to remove "Select" on the list

How can I put the "Select" as placeholder in select option but not on the list of the dropdown when you click it? Any idea?

Thanks!

<div class="form-group">
    <label class="control-label" for="name">Hours of Operation:</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
        <select class="form-control" name="hours-of-operation" class="selectpicker">
            <option>Select</option>
            <option value="Business Hours">Business Hours</option>
            <option value="After Business Hours">After Business Hours</option>
            <option value="24/7">24/7</option>
        </select>
    </div>
</div>

Upvotes: 0

Views: 63

Answers (2)

user234932
user234932

Reputation:

First of all, I would recommend doing it when select's value actually changes, not when it's merely clicked. The idea is to remove the first option element from the select. Like this:

$('select').one('change', function(e) {
   $(this).find('option').first().remove(); 
});

There are obviously many different ways to achieve the same thing, so take your pick.

Here's an working example.

http://jsfiddle.net/h7aVC/1/

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

Just set value="" and abort the event handler if no value is selected.

<select class="form-control" name="hours-of-operation" class="selectpicker">
    <option value="">Select</option>
    <option value="Business Hours">Business Hours</option>
    <option value="After Business Hours">After Business Hours</option>
    <option value="24/7">24/7</option>
</select>

Upvotes: 2

Related Questions