Javascript 如何在选择框选择项的基础上滚动div垂直滚动条？

根据需要，我需要选择框中的水平和垂直滚动条。经过研究，我发现选择框不支持水平滚动条。因此，我将选择框包装在一个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的垂直滚动条

谢谢

您必须使用CSS设置选项项的字体大小，然后将jQuery的更改方法与scrollTop结合使用。我相信这就是你需要的：

更新样式

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

添加以下jQuery

JSFIDLE链接在这里：。

这段代码适合我

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

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

    });

    });

---

这是不同的问题。是的，对不起，我把垂直和水平颠倒了！

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

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

    });

    });