html選擇滾動條

如何向html選擇框添加滾動條？是否有任何JavaScript庫模擬此行爲？html選擇滾動條

或有反正重新設計，我有2個選擇框，物品可以通過向右移動選擇框>>接口& < < FileZilla中，諾頓指揮官，指揮官總額的接口類型，其中項目可以左移和正確的...（問題是如何重新設計，以查看固定寬度選擇框中的溢出字）

從this forum post，指向另一個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。從上面的代碼，用戶不能看到'選項1長選項'等等，每個選項應該有最多200char。

來源

2009-05-23 zeroin23

一個選項將顯示上述所選擇的選項（或低於）選擇列表等下列：

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-23 08:33:30 TheVillageIdiot

這是一個非常好的答案，但也許你需要提到JavaScript的片段需要jQuery。 – 2009-05-23 08:44:25

謝謝@Jose。自從最近幾天以來我一直在使用jQuery，所以認爲它已經出現了！ – TheVillageIdiot 2009-05-23 08:53:27

原生支持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.用選擇一個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-26 04:47:27

html選擇滾動條

回答

相關問題