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?
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/
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/