11

如何在 html 选择框中添加滚动条？是否有任何 javascript 库可以模拟这种行为？

或者无论如何要重新设计，界面我有2个选择框，项目可以通过>>＆<< Filezilla，诺顿指挥官，总指挥官类型的界面转移到右侧选择框，项目可以左右移动.. .（问题是如何重新设计才能看到固定宽度选择框中的溢出字）

从这个论坛帖子，指向另一个示例，示例代码将使用 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。

4

2 回答 2

16

原生不支持 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>
于 2009-05-26T04:47:27.313 回答
8

一个选项是在选择列表上方（或下方）显示所选选项，如下所示：

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 的高度，否则它将继续向下移动选择列表。

于 2009-05-23T08:33:30.293 回答