Question

I’ve seen this very simple selectbox on youtube, where the select options are visible on hover (instead of clicking), as seen in following screenshot.

I’m trying to create similar effect in the following simple select box. Can someone please help how this can be done? Thanks.

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select> 

Answer 1

Here’s one way of doing it, though I’d prefer a more plug-in approach (rather than hard-coding the html ul):

$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

JS Fiddle demo.

---

Edited to include an alert demonstrating the changes in the select element’s value: JS Fiddle demo.

---

Edited to include the css and html used in the demo:

html

<select name="size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>

<ul id="selectUl">
    <li>small</li>
    <li>medium</li>
    <li>large</li>
</ul>

css:

select {
    opacity: 0.5;
}
ul {
    width: 8em;
    line-height: 2em;
}

li {
    display: list-item;
    width: 100%;
    height: 2em;
    border:1px solid #ccc;
    border-top-width: 0;
    text-indent: 1em;
    background-color: #f90;
}
li:first-child {
    border-top-width: 1px;
}

li.unselected {
    display: none;
    background-color: #fff;
}
ul#selectUl:hover li.unselected {
    background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
    display: list-item;
}
ul#selectUl:hover li {
    background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
    background-color: #f90;
}

This causes the menu to hide the unselected items until the ul is hovered over, then revealing all the options, and uses the click() event to assign the unselected class name to the non-clicked elements; which allows the clicked element to be still visible on mouseout.

The above CSS reflects the most-recent edit, to make the currently-selected, and :hover-ed, li more visible.

Latest JS Fiddle demo.

---

Edited because, well, I got a little bored. And had nothing better to do, so I made a simple plug-in:

(function($) {
    $.fn.selectUl = function(){
        var $origSelect = $(this);
        var newId = $(this).attr('name') + '-ul';
        var numOptions = $(this).children().length;

        $('<ul id="' + newId + '" class="plainSelect" />')
            .insertAfter($(this));

        for (var i = 0; i < numOptions; i++) {
            var text = $(this).find('option').eq(i).text();
           $('<li />').text(text).appendTo('#' + newId);
        }

        if ($(this).find('option:selected')) {
            var selected = $(this).find('option:selected').index();
            $('#' + newId)
                .find('li')
                .not(':eq(' + selected + ')')
                .addClass('unselected');
        }

        $('#' + newId + ' li')
            .hover(
                function(){
                    $(this).click(
                        function(){
                            var newSelect = $(this).index();
                            $(this)
                                .parent()
                                .find('.unselected')
                                .removeClass('unselected');
                            $(this)
                                .parent()
                                .find('li')
                                .not(this)
                                .addClass('unselected');
                            $($origSelect)
                                .find('option:selected')
                                .removeAttr('selected');
                            $($origSelect)
                                .find('option:eq(' + newSelect + ')')
                                .attr('selected',true);
                        });
                },
                function(){
            });
                    // assuming that you don't want the 'select' visible:
                    $(this).hide();

        return $(this);
    }
        })(jQuery);


$('#sizes').selectUl();

JS Fiddle demo, including the ‘plug-in’.

Notes:

• This isn’t absolutely positioned, so if you have more than one select (which you can certainly do, and works okay) it does screw with the page-flow a little (or a lot), but this can be amended in the CSS (I’d imagine, though I’ve not yet tried).
• It could probably do with some options, possibly allowing dl elements to be used in place of the current ul, which would allow for giving an explanation of the available options.
• I suspect that it could be optimised a great deal more than it currently is, but I’m not, off-hand, sure how. Possibly some sleep and, late, browsing the jQuery API might offer some insights (though if anyone sees anything obvious please leave a comment! Or take the JS Fiddle and, for want of a better term, fork it (though I’d obviously appreciate links to any subsequent forks/updates).
• I’m not entirely sure what licensing options are available to me (since everything on SO is Creative Commons cc-by-sa, according to Jeff Atwood, and the footer of this site, anyway), but for what it’s worth I’m quite happy for anyone to take the above and, well, do whatever you like with it (if it’s of any use, have fun!).

---

Edited because I felt that there should be a visible ‘guidance’ element, and also to try and explain something of how it all works.

Given the html:

<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

Use the jQuery to call the plugin:

$('#sizes').selectUl();

This takes the above select, and creates a ul with the following mark-up:

<ul id="sizes-ul" class="plainSelect">
    <li class="guidance">Select a size:</li>
    <li>XX-Small</li>
    <li class="unselected">X-Small</li>
    <li class="unselected">Small</li>
    <li class="unselected">Medium</li>
    <li class="unselected">Large</li>
    <li class="unselected">X-Large</li>
    <li class="unselected">XX-Large</li>
</ul>

The CSS used (in the demo):

ul.plainSelect {
    /* targets those 'ul' elements created by the plug-in */
    border: 1px solid #000;
}
ul.plainSelect li {
    /* this styles the 'selected' li 'option' element */
    background-color: #f90;
    display: list-item;
}
ul.plainSelect li.guidance {
    /* this is the 'Select a Reason' guidance/explanation from the image in the question */
    border-bottom: 1px solid #000;
    padding: 0.3em;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #fff;
}

ul.plainSelect li.unselected {
    /* hides the 'unselected' options, and removes the background-color for contrast */
    background-color: #fff;
    display: none;
}

ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
    /* ensures that the 'li' elements pop-up when the list is hovered over, */
    /* and act/display like 'li' elements */
    display: list-item;
}

JS Fiddle demo.