0

要件として、選択ボックスに水平および垂直スクロールバーが必要です。調査の結果、選択が水平スクロールバーをサポートしていないことがわかりました。そのため、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>

セレクトボックスのアイテムが大きくなり、セレクトの下からアイテムを選択したい場合、divの垂直スクロールバーはセレクトアイテムを移動しません。

選択ボックスで選択されたアイテムでdivの垂直スクロールバーを移動する方法を教えてください。

ありがとう

4

2 に答える 2

0

このコードは私のために働きます。

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

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

    });

    });
于 2013-01-25T10:22:01.180 に答える
0

を使用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/です。

于 2013-01-25T09:54:22.520 に答える