zer*_*n23 11 html javascript scrollbar
如何在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.从上面的代码中,用户无法看到'选项1长选项'等...并且每个选项最多应该有200char.
Jos*_*lio 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>
一个选项是在选择列表上方(或下方)显示所选选项,如下所示:
HTML
<div id="selText"><span> </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的高度,否则它将继续向下移动选择列表.