6

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:

enter image description here

3 Answers 3

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/

5
  • 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 Commented Oct 2, 2015 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
    Commented Oct 2, 2015 at 12:28
  • You could add inline-styling to it to make it display none?
    – Lee
    Commented Oct 2, 2015 at 12:31
  • look at this fiddle: jsfiddle.net/sebastianbrosch/w1o2f7yy - here it works Commented Oct 2, 2015 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
    Commented Oct 2, 2015 at 12:34
1

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/

1
  • It writes "Nothing selected" instead of "Select a Genre" Commented Oct 2, 2015 at 12:11
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.