选择选项2 “列”，尽管左侧立柱上最长的长度以及对齐

Question

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">Austrabane +10:00</option> 
    <option value="4">Australia +12:00</option> 
</select> 

JS：

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; 
    console.log(strLength); 
    for(var x=0; x<(padLength-strLength); x++){ 
     parts[0] += ' '; 
    } 
    $(this).text(parts[0].replace(/ /g, '\u00a0')+parts[1]); 
}); 

所以JS计算上的 “左” 列中最长的单词，然后将空间到较短的其他列，以使右列良好对齐。它不工作，但经过一段时间的调试后，我找不到原因。

http://jsfiddle.net/ASR2K/352/

编辑：这是我的问题：http://screencast.com/t/MMs5sKWsD

Answer 1

试戴FireFox和Chrome和两个工作正常。