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

【问题标题】：how to scroll div vertical scroll bar on the basis of select box select item?如何在选择框选择项的基础上滚动div垂直滚动条？
【发布时间】：2013-01-25 18:22:01
【问题描述】：

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

when the select box item grow,and you want to select item from bottom of select,div vertical scroll bar don't move the select item.

请帮助我，如何在选择框中选择项目时移动 div 的垂直滚动条。

谢谢

【问题讨论】：

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

标签： javascript jquery html css

【解决方案1】：

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

更新样式

.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/。

【讨论】：

【解决方案2】：

这段代码对我有用。

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

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

    });

    });

【讨论】：