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

<select style="width: 120px">
  <option>ABC</option>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>

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

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

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

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

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

<!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

<div id=myForm>

#myForm select {
width:200px; }

#myForm select:focus {
width:auto; }