web-dev-qa-db-ja.com

html選択スクロールバー

hTML選択ボックスにスクロールバーを追加するにはどうすればよいですか。この動作をエミュレートするJavaScriptライブラリはありますか？

またはとにかく再設計する必要があります、私が2つの選択ボックスを持っているインターフェイス、>>＆<< Filezilla、ノートンコマンダー、アイテムを左右に移動できるトータルコマンダーの種類のインターフェイスを介して、アイテムを右の選択ボックスにシフトできます。 。（質問は、固定幅の選択ボックスでオーバーフローした単語を表示するように再設計する方法です）

このフォーラムの投稿 から、別の example を指します。サンプルコードは、divを使用してオーバーレイして追加のテキストを表示しますが、ユーザーがオプションにカーソルを合わせる必要があります。とりあえず私が探しているソリューションではありませんが、とりあえず使用します。

<html>

<body>
<table>
<tr><td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <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>
</td>
<td>
<input type="button" value=">>"/><br>
<input type="button" value="<<"/>
</td>
<td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <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>
</td>
</tr>
</table>
</body>
</html>

ターゲットブラウザはMSIEです。上記のコードから、ユーザーは 'option 1 The long Option'などを見ることができず、各オプションは最大200charになるはずです。

javascripthtmlscrollbar
10
zeroin23

HTML Selectの水平スクロールバーはネイティブではサポートされていません。ただし、次は水平スクロールバーの外観を作成する方法です。

1。最初にcssクラスを作成

<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>

2。SELECTをDIV内にラップする-また、サイズをオプションの数に明示的に設定します。

<div class="scrollable">
<select size="6" multiple="multiple">
    <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>
15
Jose Basilio

1つのオプションは、次のように選択リストの上（または下）に選択リストを表示することです。

[〜＃〜] html [〜＃〜]

<div id="selText"><span>&nbsp;</span></div><br/>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
    <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>

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"   
  type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){        
    $("select#mySelect").change(function(){
      //$("#selText").html($($(this).children("option:selected")[0]).text());
       var txt = $($(this).children("option:selected")[0]).text();
       $("<span>" + txt + "<br/></span>").appendTo($("#selText span:last"));
    });
});
</script>

PS：-div＃selTextの高さを設定しないと、選択リストが下にシフトし続けます。

7
TheVillageIdiot