Solved

Fancy up a form dropdown...

Posted on 2004-09-25
6
331 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
6 Comments
 

Expert Comment

by:awd2004
Comment Utility
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
Comment Utility
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 50 total points
Comment Utility
>>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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 10

Expert Comment

by:eeBlueShadow
Comment Utility
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
Comment Utility
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
Comment Utility
Nice example sean
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now