Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Fancy up a form dropdown...

Posted on 2004-09-25
6
Medium Priority
?
352 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

604 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