ansaurus

Question

How to expand 'select' option width after the user wants to select an option.

Answer 1

+2 A:

If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.

You could try and set the title attribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover.
You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-nice way to do it, because it requires JavaScript on to work at all, and it works only after something has been selected - before there is a change in value no events fire for the select box.
You don't use a select box at all, but implement it's functionality using other markup and CSS. Not my favorite but I wanted to mention it.

If you are adding a long option later through JavaScript, look here: How to update HTML “select” box dynamically in IE

Tomalak 2008-11-16 16:18:57

Answer 2

A:

Okay, this option is pretty hackish but should work.

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

Which would offcourse require a hidden div.

<div id="hiddenDiv" style="visibility:hidden"></div>

ohh and you will need jQuery

Pim Jager 2008-11-16 16:23:31

Why is it that there seems to be no way around jQuery when it comes to JavaScript questions? Adding jQuery to your web site to solve *this* problem is overkill.

Tomalak 2008-11-16 16:26:20

mostly because regular javascript pisses me of so much I always use jQuery (like most people who started with PHP and then also started doing javascript)And writing jQuery is much easier and faster (for me it is).

Pim Jager 2008-11-16 17:46:19

JavaScript is a beautiful language (unlike PHP, which resides close to the other end of the spectrum), only complex DOM manipulation is annoying. Trivial DOM manipulation is... well, trivial. :-) No need for a full-blown JS framework.

Tomalak 2008-11-16 18:14:34

I agree, the question was about standartized Javascript, not about non-standard jQuery. It does not matter how good or bad they are or how much one likes or dislikes them. Will we soon start seeing "just use C" answers to Cobol questions?

buti-oxa 2008-11-16 19:48:13

*Cobol* questions? :-D

Tomalak 2008-11-16 19:55:24

First, if the questioner doesn't wan't to use the answer, he simply can decide not to use it. Secondly, this is the only complete answer that actually answers the question.And you can quite simply replace all the jQuery in here with standard Javascript. So if you want to, Do so.

Pim Jager 2008-11-17 16:56:49

Answer 3

+4 A:

Hi,

I fixed my problem with the following code:

<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">Any</option>
<option value="123">123</option>
</select>
</div>

Hope it helps!

Cheers, Cychan

2009-02-19 10:02:09

Answer 4

A:

Hi all, I improved the cychan's solution, to be like that:

<html>
<head>

<style>
    .wrapper{
     display: inline;
     float: left; 
     width: 180px; 
     overflow: hidden; 
    }
    .selectArrow{
     display: inline;
     float: left;
     width: 17px;
     height: 20px;
     border:1px solid #7f9db9;
     border-left: none;
     background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
     $('#w1').wrap("<div class='wrapper'></div>");
     $('.wrapper').after("<div class='selectArrow'/>");
     $('.wrapper').find('select').mousedown(function(){
      $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
     }).
     mouseup(function(){
      $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
     }).
     hover(function(){
      $(this).parent().next().addClass('selectArrow-mouseover');
     }, function(){
      $(this).parent().next().removeClass('selectArrow-mouseover');
     });

     $('.selectArrow').click(function(){
      $(this).prev().find('select').focus();
     });

     $('.selectArrow').mousedown(function(){
      $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
     }).
     mouseup(function(){
      $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
     }).
     hover(function(){
      $(this).addClass('selectArrow-mouseover');
     }, function(){
      $(this).removeClass('selectArrow-mouseover');
     });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

The PNGs used in css classes are uploaded here...

And you still need JQuery.....

Saeed 2009-07-03 00:10:48

Answer 5

A:

Hi,

I tried your solution Saeed but when i click on the arrow the dropdown dont open. I tried to fix this but i did not find the solution.

Or I will try to populate a ul li instead the select and push the value in a input hidden...

Any other idea ?

Thanks all

2009-07-16 13:51:59

Answer 6

A:

Saeed solution dont open! Bugged Solution

Pnecklou 2010-08-16 16:28:19

Don't post this as an "answer", post it as a "comment".

Allen 2010-08-17 17:15:04

Answer 7

A:

A simple solution I used for an existing site in IE (using jQuery, but I can post back with eventListener code if you really don't know JS that well) is the following:

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

Of course, use a variable (var cWidth = jQuery('#mySelect').width();) to store the previous width, but this is all that was required for ours to work as you'd expect.

Eric 2010-10-05 22:13:03

ansaurus

tags:

views:

answers:

How to expand 'select' option width after the user wants to select an option.

related questions