?
Solved

Fancy up a form dropdown...

Posted on 2004-09-25
6
Medium Priority
?
347 Views
Last Modified: 2008-03-06
Is there a way on a form dropdown to put categories?

TYPE ONE
   abc
   xyz
TYPE TWO
   123
   456
0
Comment
Question by:pinkstonm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 

Expert Comment

by:awd2004
ID: 12150448
It Depends whether the data in the form is dynamic, otherwise you can just put

<select name="select">
  <option>Please Select</option>
  <option value="">-- Category 1 --</option>
  <option value="anything">Anything</option>
  <option value="anything2">Anything2</option>
  <option value="">--Category 2 --</option>
  <option value="Anything cat2">Anything cat2</option>
  <option value="Anythin2 Cat 2">Anythin2 Cat 2</option>
</select>
0
 

Expert Comment

by:awd2004
ID: 12150469
you can aslo fancy up the form  by sing fonts or css

<select name="menu"
style="background-color:blue;
font size:8pt; font-family:verdana;
color:white" size="1"
onchange="jump(this.form)">
<option value="http://www.google.com">Google</option>
<option value="http://www.extremestuff.net">ES.Net</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="http://www.aol.com">AOL</option>
</select>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 200 total points
ID: 12151245
>>Is there a way on a form dropdown to put categories?

Yes, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

select
{
      font:bold 11px verdana, sans-serif;
}

optgroup
{
      background-color:#ffcc66;
}

option
{
      background-color:#cccccc;
}

</style>
</head>
<body>
<form name="myForm">

<select name="mySelect">
      <option selected label="none" value="none">Please select an option...</option>
      <optgroup label="TYPE ONE">
            <option value="abc">abc</option>
            <option value="xyz">xyz</option>
      </optgroup>
      <optgroup label="TYPE TWO">
            <option value="123">123</option>
            <option value="456">456</option>
      </optgroup>
</select>

</form>
</body>
</html>

Sean
0
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 10

Expert Comment

by:eeBlueShadow
ID: 12152896
It is interesting to note that the W3 standards specification allow nested <optgroup> tags, simlar to nested menus (e.g. View->Encoding->More in IE) but as far as I know, no browsers currently support this
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12154206
Yes - the nested version is still some time off - if ever. The basic optgroup rendering above is as far as it goes for now...

Sean
0
 
LVL 8

Expert Comment

by:klykken
ID: 12156317
Nice example sean
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

766 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question