• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Fancy up a form dropdown...

Is there a way on a form dropdown to put categories?

TYPE ONE
   abc
   xyz
TYPE TWO
   123
   456
0
pinkstonm
Asked:
pinkstonm
1 Solution
 
awd2004Commented:
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
 
awd2004Commented:
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
 
seanpowellCommented:
>>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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
eeBlueShadowCommented:
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
 
seanpowellCommented:
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
 
klykkenCommented:
Nice example sean
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now