Can I make label of select box show options list on focus?

JavaScript
1

I am want to not show my select box - just have a button that says “color” and when I click it the options list appears - I select and then I am done. The select box is not shown to the user - it would be hidden off screen. Possible?

2

There would be a problem though in that scripting cannot show the options of a select box. It might be possible to use a hidden multiple-select which is revealed, and then hidden again after a selection is made, but that tends to get trickier.

You start with the elements that you are going to be working with:


<button id="colourbutton">Color</button>
<select multiple="multiple" id="colourchoice">
    <option>Pink</option>
    <option>LightGreen</option>
    <option>LightBlue</option>
</select>

and a CSS class that will be used to hide certain parts:


.hidden {
    display: none;
}

and you start with the colour choices being hidden:


document.getElementById('colourchoice').className = 'hidden';

When the button is pressed, you hide the button and show the colour list:


document.getElementById('colourbutton').onclick = function () {
    var button = this,
        colorList = document.getElementById('colourchoice');

    button.className = 'hidden';
    colorList.className = '';
};

When a colour is chosen, you hide the colour list and show the button again. You can also do something with that selected colour:


document.getElementById('colourchoice').onclick = function () {
    var button = document.getElementById('colourbutton'),
        colorList = this,
        index = this.selectedIndex,
        colour = this.options[index].value;

    button.className = '';
    colorList.className = 'hidden';

    doSomethingWithColour(colour);
};

Which may be to set the button’s background colour:


function doSomethingWithColour(colour) {
    var button = document.getElementById('colourbutton');

    button.style.backgroundColor = colour;
}

Here it is in action - http://jsfiddle.net/pmw57/yzeT8/2/

3

There are quite a few references between those functions to different elements though, so a tidy up can be to let the button and the select list be able to easily refer to each other.


var button = document.getElementById('colourbutton'),
    list = document.getElementById('colourchoice');

button.list = list;
list.button = button;

Now we can update the functions so that those absolute references can now be removed.


[color="green"]button[/color][s][color="red"]document.getElementById('colourbutton')[/color][/s].onclick = function () {
    var button = this,
        colorList = [color="green"]this.list[/color][s][color="red"]document.getElementById('colourchoice')[/color][/s];
     ...
};

[color="green"]list[/color][s][color="red"]document.getElementById('colourchoice')[/color][/s].onclick = function () {
    var button = [color="green"]this.button[/color][s][color="red"]document.getElementById('colourbutton')[/color][/s],
        colorList = this,
        ...
 
    doSomethingWithColour(colour[color="green"], button[/color]);
};

function doSomethingWithColour(colour[color="green"], target[/color]) {
    [s][color="red"]var button = document.getElementById('colourbutton');[/color][/s]
 
    [color="green"]target[/color][s][color="red"]button[/color][/s].style.backgroundColor = colour;
}

See the update at http://jsfiddle.net/pmw57/yzeT8/3/