5

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 open, and #2 when closed.
How can I get the closed version to look like #3?

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

enter image description here

7
  • Assuming your using a JS library for visual effects, you're going to have to look in to the library and what it uses to push the information to the displayed element (altering it to include the optgroup). Otherwise, if that's just an apple-esque visual effect, I'm not sure what options you have from an out-of-the-box control. Jan 16, 2012 at 13:40
  • @BradChristie That's just the standard Apple browser chrome controls. To complete this you'd need to write some javascript to change the value of the selected item on click to append the year to the end. Jan 16, 2012 at 13:52
  • @RoryMcCrossan: Changing the value on select is going to also change the visual effect of the drop-down. They're almost better off using something like a jquery uniform and taking the control and wrapping in a set of <div>s (for visual effect) with a <select> backing the data and available for submission. Jan 16, 2012 at 13:53
  • @BradChristie If you mean the select would become wider, you could just set it's width to a fixed px size in CSS. Jan 16, 2012 at 13:54
  • @RoryMcCrossan: Not even wider, by if you have <option value="January">January</option> then on change set the text for that element, the next time the drop-down appears you'll see the "2012" only that element making it stand out like a sore thumb. Jan 16, 2012 at 13:56

3 Answers 3

1

My original (marked correct) answer is too old to be of use, so here is a more up-to-date answer that may be a helpful starting point. It has some weirdness around the select box width that would need resolving according to your UI structure. Hope it is helpful.

document.querySelector('select').addEventListener("change", function(e) {
    var value = e.target.value
  var option = e.target.querySelector("option[value='" + value + "']")
  var group = option.parentElement
  var display = document.querySelector("#value")
  var text = option.text + " " + group.label
  display.innerText = text
})
#wrapper {
  position: relative;
 }
  
#value {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  padding-left: 0.5em;
 }
  
select {
   color: #FFFFFF;
   width: 100%;
}

select option {
   color: black;
}
<html>
  <div id="wrapper">
    <div id="value">Select Date…</div>
    <select>
      <optgroup label="2012">
      <option value="1">January</option>
      <option value="2">February</option>
      </optgroup>
      <optgroup label="2013">
      <option value="3">January</option>
      <option value="4">February</option>
      </optgroup>
    </select>
  </div>
</html>


Old Answer (2012)

Its good to see someone making efforts to keep a good clean UI. Kudos, more people should do this. However I'd advise against approaching to problem this way. You run a risk of trying to force an element to do something it wasn't designed to do. Even if you find a workaround, it might end up putting you into cross browser testing hell, or simply stop working on a new browser version.

I'd suggest replacing this with a JQuery or similar scriptable SELECT widget replacement such as 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 tweak the display through JavaScript.

2
  • Good advise... But I still need a workaround because the lazy developers at Angular Material did not consider all possible cases...
    – dvdmn
    Sep 1, 2022 at 16:12
  • 1
    Updated answer above to try.... Nov 28, 2022 at 0:28
0

This is a fairly simple way of doing it... Use change/input and when it is focused, reset the text to whatever is before the year.

Appears to work well in all browsers that I have tested.. The problem is that no matter what you do, you're always going to have to change the text value of the selected element, there is no way around that. Test yourself without deploying 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>
-2

This isn't tested, so it may not work or may have bugs (for instance, it might permanently change the option's label), but perhaps it will give you some insight.

<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> 
2
  • I cannot use onChange, if I do it with onChange, when I open it the 2nd time, the newly selected option in the list would have the year repeated. This is a partial solution I've found already, but it's not complete. e.g. jsfiddle.net/exdpa , thx to Brad Christie
    – Prody
    Jan 16, 2012 at 14:17
  • @Prody: Well, you can use onchange, but perhaps you can't change the label. Maybe your solution would be to create a textbox that sits over the top of the dropdown, which makes it look like it's the dropdown itself. Add an onclick or onfocus event or something that opens the dropdown and then change the value of the textbox in the dropdown's onchange event. Again, not tested in any way, but perhaps an idea.
    – Travesty3
    Jan 16, 2012 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.