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

Question

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

谢谢

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

Answer 2

这段代码对我有用。

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

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

    });

    });