The default entry in the Bootstrap HTML selection bar

Question

In my selection, the first item in the Select Genre list is displayed by default. This is how I want to see it, but I don’t want it ("choose a genre") to be selected as capable and see 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 you can see from the code, my first option seems to be the default choice. As you can see my css div wrapper behind my hatch code. I use a custom bootstrap bar. As can be seen in the image, it can be seen and selected in the list of options.

here is the image:

Answer 1

You can make it inaccessible by adding a property to it disabled.

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

, , . , javascript, HTML. , HTML, .

SO : ` select`?

UPDATE:

, ?

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

http://jsfiddle.net/11dpc8m7/

Answer 2

:

<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>

CSS

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

: https://jsfiddle.net/sebastianbrosch/w1o2f7yy/

Answer 3

you can try this 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