Question

I have a select box that I’ve put a span near so it looks like:

___________________          ___________________
| Sort By: opt1 v |    ->    | Sort By: opt1 v |
|_________________|          |_________________| 
                             :.......opt2......:
                             :.......opt3......:

instead of:

        ___________                    __________
Sort By:|  opt1 v |    ->      Sort By:| opt1 v |
        |_________|                    |________| 
                                       :..opt2..:
                                       :..opt3..:

See my jsfiddle. It has all the html, css and jquery I’m attempting to use.

The Problem:
The select box only engages when you click on the visible option name. I need to transfer the click on the spans (one contains “Sort By:” and the other has a custom dropdown arrow img) to a click on the select element. Here’s what I’ve tried:

$('span').click(function(){
    var sb = $('select');
    //none of these work! Please help!
    sb.select();
    sb.click();
    sb.focus();
});

Some disclaimers:

• I don’t want to select a specific option. I want to OPEN the selectbox and see all the options, just as if I had clicked on the selectbox.
• I’m not allowed to use the jquery plugin selectbox.

Answer 1

What you can do is creating a background image on the select box that contains the text as well as the arrow. Using appearance: none, the native arrow is not drawn, and with some left/right padding you can pretty much achieve what you want. Note that this probably is not cross-browser, so make sure to test it: http://jsfiddle.net/5xcHm/16/.

Some canvas code to create background image:

var w = $(".sb").outerWidth();
var h = $(".sb").outerHeight();

var canvas = $("<canvas>").attr({
    "width": w,
    "height": h
}).get(0);
var ctx = canvas.getContext("2d");

$.extend(ctx, {
    font: "9pt sans-serif",
    textBaseline: "middle"
});

ctx.fillText("Sort By:", 5, h/2+1);

ctx.moveTo(w - 15, 5);
ctx.lineTo(w - 5, 5);
ctx.lineTo(w - 10, 15);
ctx.closePath();
ctx.fill();

var url = canvas.toDataURL("image/png");
$(".sb").css("background-image", "url(%)".replace("%", url));

And the CSS:

.sb {
    -webkit-appearance: none;  /* mind the prefixes */
    padding-left: 55px;
    padding-right: 15px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: left center;
}
.sortOptionContainer {
    position: relative;
}