Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selectable <optgroup> in HTML <select> tag

Is there any way to make the option group selectable?

<select>    <optgroup value="0" label="Parent Tag">      <option value="1">Child Tag</option>      <option value="2">Child Tag</option>    </optgroup>  </select>
like image 513
marcin_koss Avatar asked Mar 27 '12 15:03

marcin_koss


People also ask

Can Optgroup be selected?

From Select2 docs: "Furthermore, <optgroup> elements cannot be made selectable.

What is the use of Optgroup tag in HTML?

The <optgroup> tag is used to group related options in a <select> element (drop-down list). If you have a long list of options, groups of related options are easier to handle for a user.

How do you make a selectable list in HTML?

Use the <select> tag to create a selectable list. The HTML <select> tag is used within a form for defining a select list. Specifies that on page load the drop-down list should automatically get focus.


1 Answers

I don't think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable.

.optionGroup {      font-weight: bold;      font-style: italic;  }        .optionChild {      padding-left: 15px;  }
<select multiple="multiple">      <option value="0" class="optionGroup">Parent Tag</option>      <option value="1" class="optionChild">Child Tag</option>      <option value="2" class="optionChild">Child Tag</option>  </select>

The multiple attribute allow you to select more than one row (with ctrl click). You can remove it if it is not what you want. It was to show you that everything became selectable and that is looking the same as with optiongroup element.

like image 82
grifos Avatar answered Oct 14 '22 22:10

grifos