ansaurus

Question

Answer 1

+5 A:

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"));
    });
});

PS:- Set height of div#selText otherwise it will keep shifting select list downward.

TheVillageIdiot 2009-05-23 08:33:30

This is a very good answer, but maybe you need to mention that the snippet of javascript requires jQuery.

Jose Basilio 2009-05-23 08:44:25

Thanks @Jose. I'm working with jQuery since last many days so thought it to be present already!!!

TheVillageIdiot 2009-05-23 08:53:27

there is a catch I forgotten to mention, it is a multi select.

zeroin23 2009-05-24 04:25:41

@zeroin23 I've modified code to show list of selected items in the div above select list. Sorry for responding late, very busy :(

TheVillageIdiot 2009-05-26 11:22:17

Answer 2

+7 A:

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

<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. Wrap the SELECT inside a DIV - also, explicitly set the size to the number of options.

<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>

Jose Basilio 2009-05-26 04:47:27

+1 this solutions works with IE7 but not IE6 sadly... but it was what I was trying to accomplish.

zeroin23 2009-05-27 02:49:42

ansaurus

tags:

views:

answers:

html select scroll bar

related questions