html select scroll bar

Question

how do you add a scroll bar to the html select box  is there any javascript library that emulate this behavior   or is there anyway to redesign  the interface I have 2 select box  items can be shifted to the right select box via     amp   lt  lt   Filezilla  norton commander  total commander kind of interface where items can be shifted left and right     question is how to redesign to see the overflow words in the fixed width select box    from this forum post  pointing to another example  the sample code will overlay using div to show the additional text  but it requires the user to hover on the options  not really the solution I am looking for  though I will use it for the time being     lt html gt    lt body gt   lt table gt   lt tr gt  lt td gt   lt select size  4  id  mySelect  style  width 65px color  f98ad3   gt       lt option value  1  selected gt option 1 The Long Option lt  option gt       lt option value  2  gt option 2 lt  option gt       lt option value  3  gt option 3 lt  option gt       lt option value  4  gt option 4 lt  option gt       lt option value  5  gt option 5 Another Longer than the Long Option    lt  option gt       lt option value  6  gt option 6 lt  option gt   lt  select gt   lt  td gt   lt td gt   lt input type  button  value   gt  gt    gt  lt br gt   lt input type  button  value   lt  lt    gt   lt  td gt   lt td gt   lt select size  4  id  mySelect  style  width 65px color  f98ad3   gt       lt option value  1  selected gt option 1 The Long Option lt  option gt       lt option value  2  gt option 2 lt  option gt       lt option value  3  gt option 3 lt  option gt       lt option value  4  gt option 4 lt  option gt       lt option value  5  gt option 5 Another Longer than the Long Option    lt  option gt       lt option value  6  gt option 6 lt  option gt   lt  select gt   lt  td gt   lt  tr gt   lt  table gt   lt  body gt   lt  html gt    the target browser is MSIE  from the above code  the user cant see  option 1 The long Option  etc    and each option supposed to have up to a maximum of 200char

User · Answer

One options will be to show the selected option above (or below) the select list like following:

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:- Set height of div#selText otherwise it will keep shifting select list downward.

User · Answer

Horizontal scrollbars in a HTML Select are not natively supported  However  here s a way to create the appearance of a horizontal scrollbar   1  First create a css class   lt style type  text css  gt    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      lt  style gt    2  Wrap the SELECT inside a DIV - also  explicitly set the size to the number of options    lt div class  scrollable  gt   lt select size  6  multiple  multiple  gt       lt option value  1  selected gt option 1 The Long Option lt  option gt       lt option value  2  gt option 2 lt  option gt       lt option value  3  gt option 3 lt  option gt       lt option value  4  gt option 4 lt  option gt       lt option value  5  gt option 5 Another Longer than the Long Option    lt  option gt       lt option value  6  gt option 6 lt  option gt   lt  select gt   lt  div gt

[javascript] html select scroll bar

Examples related to javascript

Examples related to html

Examples related to scrollbar