Chained Selects Step-by-step: Set up option groups in a list group

yxScripts.com

We can use option groups in a list group, for example if we have a select list with option groups:

and the HTML codes would look like this:

<select>
<option>Select a vehicle</option>
<optgroup label="Toyota">
  <option>Cars</option>
  <option>SUVs/Van</option>
  <option>Trucks</option>
</optgroup>
<optgroup label="Honda">
  <option>Cars</option>
  <option>SUVs/Van</option>
</optgroup>
</select>

To do so with CS, we map the <optgroup> to addOptGroup('list-name', 'label') and </optgroup> to endOptGroup('list-name'):

addOption("vehicles", "Select a vehicle", "");

addOptGroup("vehicles", "Toyota");
  addOption("vehicles", "Cars", "");
  addOption("vehicles", "SUVs/Van", "");
  addOption("vehicles", "Trucks", "");
endOptGroup("vehicles");

addOptGroup("vehicles", "Honda");
  addOption("vehicles", "Cars", "");
  addOption("vehicles", "SUVs/Van", "");
endOptGroup("vehicles");

Note: Option group support in CS is disabled for Opera and browsers that don't support DOM.

Click [ here ] to see a demo page.

[ Apply CSS to list options ] [ Back to main page ]

# # #