SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Hierarchy in a Select Box

    I'm after some advice.

    I have a hierarchy of objects, such that each object can be a 'top level' object, or have a parent. The number of levels deep isn't limited.

    When editing one of these objects, I want an option to select a parent object, that the object being edited can 'belong' to. I am currently using a select box for this.

    My question is, is there a decent way to display these options in a select box?

    My current method is to use hyphens, like this:

    HTML Code:
    <select name="parent">
     <option value="0">[Top Level]</option>
     <option value="1">- Page 1</option>
     <option value="2">- Page 2</option>
     <option value="6">- - Sub Page 1</option>
     <option value="7">- - Sub Page 2</option>
     <option value="8">- - - Sub Sub Page 1</option>
     <option value="3">- Page 3</option>
     <option value="4">- Page 4</option>
     <option value="5">- Page 5</option>
    </select>
    Is there a better way I could be doing this?

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You could theoretically use CSS and have a different class with left padding to control the indent. Or use a spacer image as the background maybe?

    Alternatively do what vBulletin does on the forum jump menu below the quick reply textarea and use multiple &nbsp;
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think I'll use multiple &nbsp;s, cheers.

    The CSS method would be good.. but you'd need to put in all the different levels. Another reason for having regular expression and back reference support in CSS :P Could do something like this:

    Code:
    option./^level(\d+)$/ {
     padding-left: ($1 * 10)px
    }
    That would be awesome :P

  4. #4
    SitePoint Enthusiast webburu's Avatar
    Join Date
    Mar 2008
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it is possible but you have to use JavaScript to replace all option elements of the select box and use CSS to make the hierarchical by your all. Go here more details nice form


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •