SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    no easy way to add a divider in the drop down box (select / option box)

    it seems like there is still no easy way to add a divider to the drop down selection box? (the <select> <option> combination)

    it looks like optgroup can be used, but what if what I am after is this:

    all channels
    -----------
    science
    math
    english
    in both IE 7 and Firefox, the choice will be indented if they are option under optgroup... also, in IE, when the first optgroup has a label of empty, IE 7 will show it any way... leaving a blank line there.

    the other way seems to be using javascript to deselect the "--------" when it is selected. thanks.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want to use optgroup, you can add a disabled option:
    Code HTML4Strict:
    <select>
      <option>all channels</option>
      <option disabled>------------</option>
      <option>science</option>
      <option>math</option>
      <option>english</option>
    </select>

    It works in Opera, Safari, Chrome and Firefox, but IE7 doesn't seem to respect the disabled attribute, so you may have to expect that some users can still choose the separator.
    Birnam wood is come to Dunsinane

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    it seems like that idea of using javascript is a winner then.

    First though, make sure that the server-side script is set up to validate the form field. Then you can use javascript to improve the user experience.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this thread is more than 12 months old but I see this question asked a bunch of times and I see other people using all sorts of ways to try to handle this issue. So I just had to post something here about this.

    HTML actually already has a way to divide and/or group options in a select (dropdown box).

    It can be done by using the optgroup code. Example:
    HTML Code:
    <select>
      <optgroup label="Fruit">
        <option value="apple">apple</option>
        <option value="orange">orange</option>
      </optgroup>
      <optgroup label="Color">
        <option value="blue">blue</option>
        <option value="red">red</option>
      </optgroup>
    </select>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by seosean View Post
    HTML actually already has a way to divide and/or group options in a select (dropdown box).
    Thanks for that. The OP mentioned in his original post that he didn't want to use OptGroup, so that he could achieve a different kind of presentation for the group labels.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, I must have misread that he mentioned that. Oh well, at least others that find this thread will can find out about optgroup.

    Of course, you might be able to use CSS to style the optgroup label and pull off what he was looking for.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by seosean View Post
    you might be able to use CSS to style the optgroup label and pull off what he was looking for.
    Now that would be interesting.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Form elements can't be styled consistently across different browsers.

    Using a '--------'-seperator isn't a good idea, because the option will be read as 'Hyphen hyphen hyphen hyphen hyphen hyphen hyphen hyphen' by a screen reader.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Using a '--------'-seperator isn't a good idea, because the option will be read as 'Hyphen hyphen hyphen hyphen hyphen hyphen hyphen hyphen' by a screen reader.
    I get dash dash dash dash : )
    Though just like "star" for required, you tend to get used to it.

    Also, if disabled="disabled" works in the browser you're using, you won't hear it in forms mode because it's not editable so doesn't get the focus.

    We've used ---- mostly to force people to make a choice (even though the SMARTER idea would have been to have a set of radio buttons but the back-end guy wanted everything in selects... I don't really agree with that but it's just how it was) so server-side validation could check that something of value was selected.
    Though I like the "disabled" version better.

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by seosean View Post
    HTML actually already has a way to divide and/or group options in a select (dropdown box).

    It can be done by using the optgroup code. Example:
    HTML Code:
    <select>
      <optgroup label="Fruit">
        <option value="apple">apple</option>
        <option value="orange">orange</option>
      </optgroup>
      <optgroup label="Color">
        <option value="blue">blue</option>
        <option value="red">red</option>
      </optgroup>
    </select>

    In your given example, I would add the name attribute in the select tag. Also, there is no need for the option values, since the content is already mirroring the values.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Also, there is no need for the option values, since the content is already mirroring the values.
    Doesn't that depend on what your backend is grabbing?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    This from the specs for HTML option helps.

    When rendering a menu choice, user agents should use the value of the label attribute of the OPTION element as the choice. If this attribute is not specified, user agents should use the contents of the OPTION element.
    Our own local reference confirms this too.
    Form Elements > Option > Value

    If the value attribute isn’t present, the content ("Cheese", "Egg", and "Cabbage" in this example) will be passed as a "value" instead.
    It seems that the value attribute truly is optional.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    If the value attribute isn’t present, the content ("Cheese", "Egg", and "Cabbage" in this example) will be passed as a "value" instead. .
    Exactly.


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
  •