HTML multiple column drop down with adjusted columns

Question

I need a drop down menu with multiple columns. I googled and found a solution:

<select name="timezones">
    <option value="1">
        <column>Pacific/Auckland</column>
        <column>+12:00</column>
    </option>
    <option value="2">
        <column>Australia/Brisbane</column>
        <column>+10:00</column>
    </option>
</select>

However, the columns are not adjusted under each other.

How it looks:

Pacific/Auckland +12:00
Australia/Brisbane +10:00

How I want it looks like:

Pacific/Auckland    +12:00
Australia/Brisbane  +10:00

Answer 1

inside of a select isn't valid HTML as far as I know, however this isn't hard to solve with jquery (http://jsfiddle.net/upgradellc/ASR2K/2):

html:

<select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +12:00 </option>
    <option value="2">Australia/Brisbane +10:00 </option>
     <option value="3">Aust +10:00 </option>
    <option value="3">A +10:00 </option>
</select>

javascript:

var spacesToAdd = 5;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+'+'+parts[1]).text;
});

css, to make sure the fonts line up:

select{
    font-family:"Courier New", Courier, monospace
}

Answer 2

This solution does not expect specific font, it measures your text with your font.

There is a "magic number" to shrink the spaces between both columns the bigger this number the closer the columns are but if it is too big the function won’t work (I use 60 with my font Verdana 12px).

Add css with your font

.measuring {
    font-size: 12px;
    font-family: Verdana,Arial,sans-serif;
    display:none;
}

Add span in your page

<span id="measuring" class="measuring"></span>

Use the function twoColumnDropDown().

function twoColumnDropDown(dd, separatorChars, magicNumber) {
    var biggestLength = 0;
    $(dd).find('option').each(function () {
        $("#measuring").text($(this).text().replace(separatorChars, ''));
        if ($("#measuring").width() > biggestLength) {
            biggestLength = $("#measuring").width();
        }
    });
    biggestLength = biggestLength - magicNumber;
    $(dd).find('option').each(function () {
        if ($(this).text() != "") {
            var parts = $(this).text().split(separatorChars);
            $("#measuring").text(parts[0]);
            $(this).text(parts[0] + String.fromCharCode(8202).repeat(biggestLength - $("#measuring").width()) + parts[1]);

        }
    });
}

Explanation:

• dd = select element
• separatorChars = usually "-"
• magicNumber = explained earlier