带有调整列的 HTML 多列下拉

Question

我需要一个包含多列的下拉菜单。我用谷歌搜索并找到了解决方案:

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

但是，这些列不会相互调整。

外观:

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

我希望它看起来像:

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

Answer 1

据我所知，select 中的

不是有效的 HTML，但是使用 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，确保字体对齐:

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