HTML Select: How can you change the label when <select> is closed?

Question

Consider this:

<select name="month_selection"> <optgroup label="2012"> <option value="1">January</option> </optgroup> <optgroup label="2011"> <option value="1">January</option> <option value="2">February</option> 

The HTML above looks like # 1 when opening and # 2 when closing.
How to make a closed version look like # 3?

The goal is also to show the selected year without repeating it in the open options (so it looks cleaner).

Answer 1

It’s good to see someone making an effort to maintain a nice clean user interface. Kudos, more people should do this. However, I would advise you not to approach the problem this way. You run the risk of trying to force an element to do what it is not intended to do. Even if you find a workaround, it can lead to you going to cross-browser hell, or just stop working with the new version of the browser.

I would suggest replacing this with jQuery or a similar replacement for the SELECT widget, for example http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ . This will give you all the flexibility you need to customize your display through JavaScript.

Answer 2

This is a pretty simple way to do this ... Use change / input and when it is focused, reset the text to what it is up to a year.

Appears to work well in all browsers I tested. The problem is that no matter what you do, you always have to change the text value of the selected item, there is no way around this. Test yourself without deployment here - http://jsfiddle.net/CTwJy/

 <select name="month_selection" id="month_selection"> <optgroup label="2012"> <option value="1">January</option> </optgroup> <optgroup label="2011"> <option value="1">January</option> <option value="2">February</option> </optgroup> </select> <script type="text/javascript"> function attach(ele, evt, cb) { ele.addEventListener ? ele.addEventListener(evt, cb) : ele.attachEvent('on' + evt, cb); } function evSupported(ele, evt) { return ((('on'+evt) in ele) ? true : (function(ele, evt) { ele.setAttribute('on'+evt, 'return;'); return (typeof ele['on'+evt] == 'function'); })()); }; var selectBox = document.getElementById('month_selection'); attach(selectBox, (evSupported(selectBox, 'input') ? 'input' : 'change'), function() { this.options[this.selectedIndex].innerText += ' ' + this.options[this.selectedIndex].parentNode.label; this.blur(); }); attach(selectBox, 'focus', function() { for (var i = 0; i < this.options.length; i++) { this.options[i].innerText = this.options[i].innerText.split(' ')[0]; } }); </script> 

Answer 3

This has not been verified, so it may not work or it may have errors (for example, it may permanently change the option label), but maybe this will give you some idea.

 <script type="text/JavaScript"> function changeLabel() { var dropDown = document.getElementById("selMonth"); dropDown.options[dropDown.selectedIndex].label += " "+ dropDown.options[dropDown.selectedIndex].parentNode.label; } </script> <select name="month_selection" id="selMonth" onchange="changeLabel()"> <optgroup label="2012"> <option value="1">January</option> </optgroup> <optgroup label="2011"> <option value="1">January</option> <option value="2">February</option>