<html>
<head>
<link rel="stylesheet" href="required/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="required/css/select.php?scope=.ui-select" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Swiss" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
function topen(){
var $select = $('select').first();
$select.attr('size',$select.children().length);
}
function tclose(){
console.log('clicked');
var $select = $('select').first();
$select.attr('size',1);
console.log($select.attr('size'));
}
//binde the click event
$(document).ready(function(){
$('.ui-select a:first').click(function(){
$(this).parent().parent().find('select').first().attr('size',2).css('overflow','hidden');
});
});
</script>
</head>
<body>
<div class="ui-select" style="position:relative;">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="width:98px;height:22px;">
<span class="ui-helper-hidden-accessible"></span>
<a class="ui-spinner-button ui-spinner-down ui-state-default ui-corner-right">
<span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"></span></span>
</a>
</span>
<select onclick="tclose()" style="border:none;margin:2px;overflow:hidden">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</body>
</html>