HTML当选项中的HTML选择列表中选择

Question

我有以下的HTML代码垂直中心的选择：

<select name="" id="listF" size="10"> 
     <option value="01">001</option> 
     <option value="02">002</option> 
     <option value="03">003</option> 
     <option value="04">004</option> 
     <option value="05">005</option> 
     <option value="06">006</option> 
     <option value="07">007</option> 
     <option value="08">008</option> 
     <option value="09">009</option> 
     <option value="10">010</option> 
     <option value="11">011</option> 
     <option value="12">012</option> 
     <option value="13">013</option> 
     <option value="14">014</option> 
     <option value="15">015</option> 
     <option value="16">016</option> 
     <option value="17">017</option> 
     <option value="18">018</option> 
     <option value="19">019</option> 
     <option value="20">020</option> 
     <option value="21">021</option> 
     <option value="22">022</option> 
     <option value="23">023</option> 
     <option value="24">024</option> 
    </select> 

和我有以下的JavaScript

$('#listF').click(function(){ 
    var n = 10; 
    if(this.selectedIndex < ($(this).find('option').length-n)) { 
    this.selectedIndex+=n; 
    this.selectedIndex-=n; 
    } 
}); 

选择的HTML lenght是10 - 我希望无论何时我选择垂直居中（不水平）的选项，都会显示第5个

Option 1 
Option 2 
Option 3 
Option 4 
Option 5 
Option 6 
Option 7 
Option 8 
Option 9 
Option 10 

如果我选择选项12 - 选项12将居中

Option 8 
Option 9 
Option 10 
Option 11 
Option 12 <<<<<Centered 
Option 13 
Option 14 
Option 15 
Option 16 
Option 17 

说我选择选项7 - 选项7将居中

Option 3 
Option 4 
Option 5 
Option 6 
Option 7 <<<<<Centered 
Option 8 
Option 9 
Option 10 
Option 11 
Option 12 

我怎样才能modiy我的JavaScript来达到这个目标？

我要垂直居中的<option>相对于<select>