ansaurus

Question

Answer 1

+1 A:

This has nothing to do with jQuery or JavaScript. Use the HTML <optgroup> tag to divide your list into different sections. For example:

<select>
  <optgroup label="Southern Suburb">
    <option value="1">suburb1</option>
    ...
  </optgroup>
  <optgroup label="Northern Suburb">
    <option value="5">suburb5</option>
    ...
  </optgroup>
</select>

casablanca 2010-10-27 02:15:04

sorry.. should be more specifiC and complex.. I need to have it until 4 hierarchy levels.

2010-10-27 02:19:48

@user384080: Unfortunately there is no such feature in HTML. The best you can do is use `<optgroup>` for all levels and manually indent the text by using ` `.

casablanca 2010-10-27 02:24:21

but i need to disallow user to select the parent node. only the leaf nodes can be selected.. :( btw is there a built-in control like this with asp.net?

2010-10-27 02:26:16

@user384080: If you use `<optgroup>` for the sub-levels as well, the user can't select them. I'm not familiar with ASP.NET though, so I can't say much about that.

casablanca 2010-10-27 02:33:07

Answer 2

A:

Edit: This answer isn't relevant you were asking for a select menu not a navigation list...

To agree with casablanca, a dropdown would have another to do with jquery... (unless you were animating it)

Basically you could make a list with your elements then create a sub list within a list element of your first list (if you can follow that...)

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Contact-Type" content="text/html; charset=utf-8" />
  <title>Dropdown</title>

  <style type="text/css">
    /* hide child elements */
    #nav li ul {
      display:none;
    }

    /* show child elements when hovering over list item */
    #nav li:hover ul {
      display:block;
    }
  </style>
</head>
<body>

<ul id="nav">
  <li><a href="#">Southern Suburb</a>
    <ul>
      <li><a href="#">suburb1</a></li>
      <li><a href="#">suburb2</a></li>
      <li><a href="#">suburb3</a></li>
    </ul>
  </li>
</ul>

</body>
</html>

Good luck

David 2010-10-27 02:24:27

ansaurus

tags:

views:

answers:

category subcategory in drop down

related questions