Question

I have a select element which will be displayed on mobile device

<form>
<select id="selectMe" >
    <optgroup label="Australia">
        <option value="AustCars">Australia Cars Report</option>
        <option value="AustBikes">Australia Bikes Report</option>                
    </optgroup>
    <optgroup label="New Zealand">                    
        <option value="NZCars">New Zealand Cars Report</option>
        <option value="NZBikes">New Zealand Bikes Report</option>                
    </optgroup>
</select>
</form>​

Two things to note:

• I want to display the full name Australia Cars Report when closed, to remove the ambiguity between Australia and New Zealand.
• I want to use the shorter version Cars Report when the select is opened, because the full name Australia Cars Report is too long for the iPhone selector (not actual names, but renders as Austr...rs Report or similar) and the country is implicit in the optgroup.

My approach (based on Change a select list display value upon selecting description) is to modify the value of each item when the control gets focus, and then un-modify when it loses focus. And that’s about where I get stuck.

I have two problems here:

• I can get the focus event, but there’s not ‘lostfocus’ event. I can’t use the ‘changed’ event because the user might not have actually changed the selection.
• I don’t know how to get the value of the optgroup to add and remove from the option text. By this I mean that I need to find, for Australia Cars Report, that it is nested under Australia and thus I can remove that word from the display text.

I can use javascript or jQuery, or other tools if applicable. Open to suggestions of an easy way to do this that I’ve overlooked, too.

Answer 1

I can get the focus event, but there’s not ‘lostfocus’ event. I can’t use the ‘changed’ event because the user might not have actually changed the selection.

Use blur.

I don’t know how to get the value of the optgroup to add and remove from the option text.

A little unclear, but I’ll hazard a few guesses to get you started:

• You’ll need to give the specific group an ID to access it uniquely, e.g.

  var fooElement = document.getElementById("foo")

• You can get the selected object using fooElement.selected
• You can get all of the options using fooElement.options[]. Adding and removing new DOM elements to this list will add or remove them in the HTML DOM.
• Values of an option can be found using .value or .text.

Try looking up the select tag in HTML, and the javascript to interact with that type of element. Good luck.