如何在選擇框選擇項的基礎上滾動div垂直滾動條？

Question

由於需求我需要選擇框中的水平和垂直滾動條。研究後，我發現選擇不支持水平滾動條。因此，我包裹選擇內DIV。

<style type="text/css"> 
.scrollable{ 
    overflow: auto; 
    width: 70px; /* adjust this width depending to amount of text to display */ 
    height: 80px; /* adjust height depending on number of options to display */ 
    border: 1px silver solid; 
} 
.scrollable select{ 
    border: none; 
} 
</style> 

<div class="scrollable" id="scrolldiv"> 
<select size="6" multiple="multiple" id="selectbox"> 
    <option value="1" selected>option 1 The Long Option</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
    <option value="4">option 4</option> 
    <option value="5">option 5 Another Longer than the Long Option ;)</option> 
    <option value="6">option 6</option> 
</select> 
</div> 

當選擇框項目成長，你想從選擇，DIV垂直滾動條的底部項目不動的選擇項。

請幫助我，如何在選擇框中移動div的垂直滾動條。

感謝

Answer 1

此代碼適用於我。

jQuery(document).ready(function($) 
    { 

    $('#selectbox').change(function() 
    { 
    var divscrollvalue = (parseInt(this.selectedIndex))*17; 
    $('#scrolldiv').scrollTop(divscrollvalue); 

    }); 

    }); 

Answer 2

你必須使用CSS設置你的選項項目的字體大小，然後連同scrollTop()使用jQuery的change()方法。我相信這是你所需要的：

更新的風格

.scrollable select { 
    font-size: 14px; 
    border: none; 
} 

添加以下jQuery

$("select").change(function() { 
    $("select option:selected").each(function() { 
    $("#scrolldiv").scrollTop($(this)[0].index*14); 
    }); 
}); 

的jsFiddle鏈接是在這裏：http://jsfiddle.net/jKZ5s/1/。