選擇選項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和兩個工作正常。