Default Writing, On a Bootstrap selection bar HTML

Question

In my default selection it shows the first element in the list "Select a genre". That is how I want to see it but I dont want it ("select a genre") to be select able and seen in the list

        <div class="wrapper">   

                <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
                <optgroup  >
                <option>Select a Genre</option>
                </optgroup>
                <optgroup label="Rock">
                  <option>Punk Rock</option>
                  <option>Hard Rock</option>

                </optgroup>
                <optgroup label="Pop">
                  <option>Turkish Pop</option>
                  <option>English Pop</option>
                </optgroup>

              </select>

        </div>

  .wrapper {
  position: relative;
  top: 326px;
  left: -42px;
  height: 100%;
  width: 100%;
  z-index: 10;
  text-align: center;
}

As it can be seen in the code my first option seems to be the default selection. As you can see my div wrapper css behind my selection bar code. I use custom bootstrap bar. As it can be seen in the image it can be seen and selectable in the option list.

here is the image:

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

You can make it non-selectable by adding the property disabled to it.

<option value="" disabled="disabled">Select a Genre</option>

In regards to hiding it from the list, I don't believe you can do this natively. You might be able to using javascript, but not with strict HTML. If it were me, I would stick with the native HTML semantics of showing it in the list.

This other question on SO might help: A Placeholder for the `select` tag?

UPDATE:

You could hide it using inline-styling maybe?

<option value="" disabled="disabled" style="display:none;">Select a Genre</option>

http://jsfiddle.net/11dpc8m7/

edited May 23 '17 at 12:06

Community

1
1

answered Oct 02 '15 at 12:03

Lee

4,187
6
25
71

I checked that question and tried the demo, it is similiar but not same I guess, the problem still remains. I guess it cannot be done by making "Select a Genre" option dissapear from the list with html only – Meric Ozcan Oct 02 '15 at 12:14
No, because the options in a list are meant to be shown there by default. But you can at least make the initial one disabled, so it cannot be selected once the menu is open. – Lee Oct 02 '15 at 12:28
You could add inline-styling to it to make it display none? – Lee Oct 02 '15 at 12:31
look at this fiddle: https://jsfiddle.net/sebastianbrosch/w1o2f7yy/ - here it works – Sebastian Brosch Oct 02 '15 at 12:33
Yeah, I've just updated my answer with a similar approach. Well, the same method, different approach. It seems to work though! – Lee Oct 02 '15 at 12:34

Sebastian Brosch · Answer 2 · 2015-10-02T12:34:00.830

Try this one:

<div class="wrapper">   
    <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
        <optgroup class="hidden">
            <option disabled selected>Select a Genre</option>
        </optgroup>
        <optgroup label="Rock">
            <option>Punk Rock</option>
            <option>Hard Rock</option>
        </optgroup>
        <optgroup label="Pop">
            <option>Turkish Pop</option>
            <option>English Pop</option>
        </optgroup>
    </select>
</div>

And with this additional CSS

.hidden {
    display:none;
    visibility:hidden;
}

A fiddle of this solution: https://jsfiddle.net/sebastianbrosch/w1o2f7yy/

It writes "Nothing selected" instead of "Select a Genre" – Meric Ozcan Oct 02 '15 at 12:11 — Meric Ozcan, Oct 02 '15 at 12:11

score 0 · Answer 3 · answered Oct 02 '15 at 12:20

you can try this one sir:

<label>Type of Business</label>
<select class="form-control">
   <optgroup  >
                <option>Select a Genre</option>
                </optgroup>
                <optgroup label="Rock">
                     <option disabled>──────────</option>
                  <option>Punk Rock</option>
                  <option>Hard Rock</option>

                </optgroup>
                <optgroup label="Pop">
                    <option disabled>──────────</option>
                  <option>Turkish Pop</option>
                  <option>English Pop</option>
                </optgroup>
</select>

DEMO FIDDLE

Default Writing, On a Bootstrap selection bar HTML

3 Answers3