Question

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

当选择框项目增长，并且您想从select底部选择项目时，div垂直滚动条不会移动选择项目。

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

由于

Answer 1

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

更新样式

scrollTop()

添加以下.scrollable select { font-size: 14px; border: none; }

jQuery

$("select").change(function () { $("select option:selected").each(function () { $("#scrolldiv").scrollTop($(this)[0].index*14); }); });链接位于：http://jsfiddle.net/jKZ5s/1/。

Answer 2

此代码适用于我。

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

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

    });

    });

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

2 个答案: