Group Select Option

[shiggyshag]

Hi

Is it possible to have a select dropdown which can have catagories with arrows

So lets say

Search Enginee -> (drops down say Yahoo, google etc)
Newspapers -> (drops down say Sun, Times etc)
Radio (no dropdown but can select it)
etc

Hope I have made my self clear

Cheers

 

[Vragabond]

You can do it like this:

<select name="links">
  <optgroup label="Search Engine">
    <option>Yahoo</option>
    <option>Google</option>
    <option>Altavista</option>
  </optgroup>
  <optgroup label="Newspapers">
    <option>Sun</option>
    <option>Times</option>
  </optgroup>
  <option>Radio</option>
</select>

However, it is up to user agents to decide how they will render this. Mostly just provide little divisions within the dropdown.

 

[FesterSXS]

hello again,

another possibility if you dont fancy the HTML lists with CSS/javascript is to stick with your select dropdowns but just have headings for each category.

<select name="myList">
<option value="" class="heading">Search Engines</option>
<option value="Google">Google</option>
<option value="MSN">MSN</option>
<option value="Yahoo">Yahoo</option>
<option value="" class="heading">Newspapers</option>
<option value="Mail">Mail</option>
<option value="Sun">Sun</option>
<option value="Times">Times</option>
</select>

You can then style the headings in your style sheet to look however you wish.


Tony

Spirax-Sarco - steam traps control valves heat exchangers
Sun Villa - Luxury Florida accommodation

 

[shiggyshag]

Hi

Vragabond I don't want them all listed in a massive List I need to have the headings onl then a side list comes out on hover or my list will be massive.

FesterSXS Im not sure what you mean could you explain for me.

Cheers

 

[Vragabond]

In that case you only have three options:

1. Write your own dropdown via css/javascript
2. Have the contents of the select dropdown change when you select an item:
- without reloading the page by using javascript.
- with reloading the page by using server side technology.

As you can see, all the solutions fall out of the scope of this forum and you should pursue them in their respective fora.

 

[Foamcow]

The problem with FesterSXS's solution is that the user can select a heading, which will return no information.

The "correct" way is with optgroups and labels.
This is standard HTML.


If you want multilevel dropdowns you are going to have to code them up yourself using css/javascript as per Vrag's post.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[FesterSXS]

Never used optgroup before - didnt know about it - thanks Vrag/Foamcow for pointing them out


Tony

Spirax-Sarco - steam traps control valves heat exchangers
Sun Villa - Luxury Florida accommodation