logo标签列表

HTML选择滚动条

javascripthtmlscrollbar
11
你如何在HTML选择框中添加滚动条？是否有JavaScript库可以模拟这种行为？
或者是否有任何方法重新设计界面？我有两个选择框，可以通过“ >> ”和“ << ”将项目移至右侧的选择框。如Filezilla、norton commander、total commander等界面，可以将项目向左和向右移动...（问题是如何重新设计以在固定宽度的选择框中查看溢出词）。
来自本论坛帖子，指向另一个示例，示例代码将使用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。从上述代码中，用户无法看到“选项1长选项”等内容...而每个选项应该最多有200个字符。

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>
这个解决方案在IE7上可以工作，但不幸的是在IE6上不能。但至少它达到了我想要实现的目标。 - zeroin23
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>

提示：设置div#selText的高度，否则它将持续向下移动选择列表。

1
这是一个非常好的答案，但也许你需要提到这个 JavaScript 代码片段需要 jQuery。 - Jose Basilio
谢谢@Jose。我已经用jQuery工作了好几天，所以以为它已经存在了！！！ - TheVillageIdiot
我忘了提到一个问题，它是多选的。 - zeroin23
@zeroin23，我已经修改了代码，以在选择列表上方的div中显示所选项目的列表。很抱歉回复晚了，最近非常忙 :( - TheVillageIdiot
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接