Dropdown Box with expanding optgroup

问题

Im looking for a select box that i can use that has expandible optgroups

The options in the groups should not display until the mouse is move over the optgroup label

<select>
 <optgroup label="group 1"> 
  <option>1</option> <!-- Options within this group hidden until mouseover its group label -->
  <option>2</option>
  <option>3</option>
  <option>4</option> 
 </optgroup>
 <optgroup label="group 2">
  <option>1</option> <!-- Options within this group hidden until mouseover its group label -->
  <option>2</option>
  <option>3</option>
  <option>4</option>
 </optgroup>
 <optgroup label="group 3">
  <option>1</option> <!-- Options within this group hidden until mouseover its group label -->
  <option>2</option>
  <option>3</option>
  <option>4</option>
 </optgroup>
</select>

I want to be able to do this becuase am going to have some very large options and it will help break them down.

If i am unable to do this through an HTML select box + JS i would like to build a customised dropdown that will support this using DIV tags. If anyone knows where i can find any information about this or a tutorial that would be great.

Thanks

回答1:

NVM i found a solution that works,

I had to use HTML, CSS and JS to achieve what i wanted.

I copied this tutorial http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

and added the extra bits i needed to generate the groups and functionality.

The code that works for me is below....

This is the HTML to generate the layout

  <div class='selectBox'>
    <span class='selected'>Reset Filter</span> <span class=
    'selectArrow'>&amp;#9660</span>
    <div class="selectOptions">
      <div>
        <span class="selectOption c1" value="reset" group="0">Reset Filter</span>
      </div>
      <div>
        <span class="selectOption c1" value="online_booking" group="1">Online
        Booking</span>
      </div>
      <div>
        <span class="selectOptionGroup" value="2">&gt;&gt; Services Offered</span>
        <span class="selectOption" value="SERVICING" group="2">SERVICING</span>
        <span class="selectOption" value="MOT TESTING" group="2">MOT TESTING</span>
        <span class="selectOption" value="TYRES" group="2">TYRES</span>
      </div>
      <div>
        <span class="selectOptionGroup" value="3">&gt;&gt; Car Manufacturer</span>
        <span class="selectOption" value="ALFA ROMEO" group="3">ALFA ROMEO</span>
        <span class="selectOption" value="ASTON MARTIN" group="3">ASTON MARTIN</span>
        <span class="selectOption" value="AUDI" group="3">AUDI</span>
      </div>
    </div>
  </div>

This is the Jquery JS code that creates the dropdown

    function enableSelectBoxes(){
            $('div.selectBox').each(function(){
                $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
                $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

                $(this).children('span.selected,span.selectArrow').click(function(){
                        if($(this).parent().children('div.selectOptions').css('display') == 'none'){
                                $(this).parent().children('div.selectOptions').css('display','block');
                        }
                        else
                        {
                                $(this).parent().children('div.selectOptions').css('display','none');
                        }
                });

                $(this).find('span.selectOption').click(function(){
                        $(this).parent().parent().css('display','none');
                        $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
                        $(this).parent().parent().siblings('span.selected').html($(this).html());
                        $("#filter_type").val($(this).attr("group"));
                        $("#filter_value").val($(this).attr("value"));
                });

                $(this).find('span.selectOptionGroup').click(function(){
                    var group = $(this).attr("value");
                    $(this).parent().children("span[group='" + group + "']").each(function(){
                        if($(this).css("display") == "block") {
                            $(this).css("display", "none");
                        }
                        else {
                            $(this).css("display", "block");
                        }
                    });
                });
            });
    }

And finally the CSS

div.selectBox {
    position: relative;
    display: inline-block;
    cursor: default;
    text-align: left;
    line-height: 30px;
    clear: both;
    color: #888;
    margin-top: 20px;
}

span.selected {
    width: 167px;
    text-indent: 20px;
    border: 1px solid #ccc;
    border-right: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: #f6f6f6;
    overflow: hidden;
}

span.selectArrow {
    width: 30px;
    border: 1px solid #9FD573;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    font-size: 20px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: #9FD573;
}

span.selectArrow,span.selected {
    position: relative;
    float: left;
    height: 30px;
    z-index: 1;
}

div.selectOptions {
    position: absolute;
    top: 28px;
    left: 0;
    width: 198px;
    border: 1px solid #ccc;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    background: #f6f6f6;
    padding-top: 2px;
    display: none;
    max-height: 400px;
    overflow: auto;
}

span.selectOption, span.selectOptionGroup {
    width: 80%;
    line-height: 20px;
    padding: 5px 10%;
}


span.selectOption{
    display: none;
}

span.selectOption:hover, span.selectOptionGroup:hover {
    color: #f6f6f6;
    background: #4096ee;
}

span.selectOptionGroup {
    display: block;
    font-weight: bold;
    font-style: italic;
}

回答2:

I don't think this is possible with an html select box, because not all browsers support mouse events on option groups within a select box. A few things you may want to try would be:

Jquery accordion
```
$(document).ready(function() {$("#accordion").accordion();});
```
This is limited due to the fact that an accordion can only have one item open at a time. If the user wants to compare options, all at once, they're screwed. Check the docs for more.
Use a checkbox or something similar, in a separate field, to control what is selectable in the select box. This way you would be able to simply disable certain options , but they would still be visible so the user would know what they where missing out on. Or you could completely hide the options which would solve your problem of having huge options.
jqTree (github project here)

I've never used this, but it looks like just what you want, except for the fact that it doesn't use the standard html select box.

I noticed that you just answered your own question , but I'm going to post anyway because jqTree may be useful and others should know that a standard html select box does not support mouse events on optgroups.

来源：https://stackoverflow.com/questions/12422854/dropdown-box-with-expanding-optgroup

标签

javascript

jquery

html

jquery-ui

jquery-plugins