Select. Hierarchy.

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shapper
    #1

    Select. Hierarchy.

    Hello,

    I want to display, in a select, a few items but having between
    themselves an hierarchy like a tree view.
    I want to push a few of them a little bit forward then others ... I
    will have three levels.

    What is the best way to do this?

    Thanks,
    Miguel
    Tags: None
    • Joshua Cranmer
      #2
      Re: Select. Hierarchy.

      shapper wrote:
      Hello,
      >
      I want to display, in a select, a few items but having between
      themselves an hierarchy like a tree view.
      I want to push a few of them a little bit forward then others ... I
      will have three levels.
      >
      What is the best way to do this?
      I think something like:
      <select>
      <optgroup label="2008">
      <option value="2008Q1"> Q1</option>
      <option value="2008Q2"> Q2</option>
      <option value="2008Q3"> Q3</option>
      <option value="2008Q4"> Q4</option>
      </optgroup>
      <optgroup label="2007">
      <option value="2007Q1"> Q1</option>
      <option value="2007Q2"> Q2</option>
      <option value="2007Q3"> Q3</option>
      <option value="2007Q4"> Q4</option>
      </optgroup>
      </select>

      should due the trick.

      --
      Beware of bugs in the above code; I have only proved it correct, not
      tried it. -- Donald E. Knuth

        Comment

        • Johannes Koch
          #3
          Re: Select. Hierarchy.

          Joshua Cranmer schrieb:
          shapper wrote:
          >I
          >will have three levels.
          I think something like:
          <select>
          <optgroup label="2008">
          <option value="2008Q1"> Q1</option>
          optgroup-option is only two-level.

          --
          Johannes Koch
          In te domine speravi; non confundar in aeternum.
          (Te Deum, 4th cent.)

            Comment

            • Jonathan N. Little
              #4
              Re: Select. Hierarchy.

              Johannes Koch wrote:
              Joshua Cranmer schrieb:
              >shapper wrote:
              >>I
              >>will have three levels.
              >
              >I think something like:
              ><select>
              > <optgroup label="2008">
              > <option value="2008Q1"> Q1</option>
              >
              optgroup-option is only two-level.
              >

              Gecko only...

              option { padding: 0; }
              option.level1 { padding-left: 1em; }
              option.level2 { padding-left: 2em; }
              option.level3 { padding-left: 3em; }



              <select>
              <option class="level0"> At level 0</option>
              <option class="level0"> At level 0</option>
              <option class="level1"> At level 1</option>
              <option class="level2"> At level 2</option>
              <option class="level2"> At level 2</option>
              <option class="level3"> At level 3</option>
              <option class="level1"> At level 1</option>
              <option class="level1"> At level 1</option>
              <option class="level0"> At level 0</option>
              <option class="level1"> At level 1</option>
              </select>


              --
              Take care,

              Jonathan
              -------------------
              LITTLE WORKS STUDIO
              Little Works Studio Site Maintainance
              http://www.LittleWorksStudio.com

                Comment

                • shapper
                  #5
                  Re: Select. Hierarchy.

                  On Jun 23, 3:44 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:
                  Johannes Koch wrote:
                  Joshua Cranmer schrieb:
                  shapper wrote:
                  >I
                  >will have three levels.
                  >
                  I think something like:
                  <select>
                    <optgroup label="2008">
                        <option value="2008Q1"> Q1</option>
                  >
                  optgroup-option is only two-level.
                  >
                  Gecko only...
                  >
                  option { padding: 0; }
                  option.level1 { padding-left: 1em; }
                  option.level2 { padding-left: 2em; }
                  option.level3 { padding-left: 3em; }
                  >
                  <select>
                  <option class="level0"> At level 0</option>
                  <option class="level0"> At level 0</option>
                  <option class="level1"> At level 1</option>
                  <option class="level2"> At level 2</option>
                  <option class="level2"> At level 2</option>
                  <option class="level3"> At level 3</option>
                  <option class="level1"> At level 1</option>
                  <option class="level1"> At level 1</option>
                  <option class="level0"> At level 0</option>
                  <option class="level1"> At level 1</option>
                  </select>
                  >
                  --
                  Take care,
                  >
                  Jonathan
                  -------------------
                  LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com
                  I know this is not the best solution but maybe adding one, two,
                  three, ... non breaking spaces before the value depending on the
                  level?

                  I found this in wordpress Category selector. It will work in all
                  browsers.

                  Thanks,
                  Miguel

                    Comment

                    • shapper
                      #6
                      Re: Select. Hierarchy.

                      On Jun 23, 3:44 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:
                      Johannes Koch wrote:
                      Joshua Cranmer schrieb:
                      shapper wrote:
                      >I
                      >will have three levels.
                      >
                      I think something like:
                      <select>
                        <optgroup label="2008">
                            <option value="2008Q1"> Q1</option>
                      >
                      optgroup-option is only two-level.
                      >
                      Gecko only...
                      >
                      option { padding: 0; }
                      option.level1 { padding-left: 1em; }
                      option.level2 { padding-left: 2em; }
                      option.level3 { padding-left: 3em; }
                      >
                      <select>
                      <option class="level0"> At level 0</option>
                      <option class="level0"> At level 0</option>
                      <option class="level1"> At level 1</option>
                      <option class="level2"> At level 2</option>
                      <option class="level2"> At level 2</option>
                      <option class="level3"> At level 3</option>
                      <option class="level1"> At level 1</option>
                      <option class="level1"> At level 1</option>
                      <option class="level0"> At level 0</option>
                      <option class="level1"> At level 1</option>
                      </select>
                      >
                      --
                      Take care,
                      >
                      Jonathan
                      -------------------
                      LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com
                      I know this is not the best solution but maybe adding one, two,
                      three, ... non breaking spaces before the value depending on the
                      level?

                      I found this in wordpress Category selector. It will work in all
                      browsers.

                      Thanks,
                      Miguel

                        Comment

                        Previous template Next
                        Working...