Select auto resize

by Jader Wagner

HTML

<select id='select1'>
    <option>Morango</option>
    <option>Menta</option>
    <option>Chocolate</option>
    <option>Caipirinha</option>
    <option>Morango com champanhe</option>
    <option>Uva</option>
</select>
<div id='container'>
    <div id='ancora'>
        <select id='select2'>
            <option>Morango</option>
            <option>Menta</option>
            <option>Chocolate</option>
            <option>Caipirinha</option>
            <option>Morango com champanhe</option>
            <option>Uva</option>
        </select>
    </div>
</div>
<select id='select3'>
    <option>Morango</option>
    <option>Menta</option>
    <option>Chocolate</option>
    <option>Caipirinha</option>
    <option>Morango com champanhe</option>
    <option>Uva</option>
</select>
<span id="tmp-width" style="display:none"></span>

<div id="pseudo-select">
    <div></div>
    <select>
        <option>Morango</option>
        <option>Menta</option>
        <option>Chocolate</option>
        <option>Caipirinha</option>
        <option>Morango com champanhe</option>
        <option>Uva</option>
    </select>
</div>

CSS

select {
    width:100px;
    height:22px;
    padding:0;
    margin:0;
}
#container {
    display:inline-block;
    position:relative;
    width:100px;
    height: 16px;
}
#ancora {
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}
#select2:hover {
    width:auto;
}

#pseudo-select {
    display:inline-block;
    position:relative;
}
#pseudo-select div {
    display:inline-block;
    height: 16px;
    cursor:pointer;
    border:1px solid #666;
    font:13px Arial;
    padding:2px 20px 2px 4px;
    background:url("http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-arrow-down-icon.png") no-repeat right center;
}
#pseudo-select select {
    position:absolute;
    top:24px;
    left:0;
    display:none;
    width:auto;
    height:auto;
}

JavaScript

$('#select1').attr('title', $('#select1').children(':selected').text()).change(function () {
    $(this).attr('title', $(this).children(':selected').text());
});


$('#select3').change(function () {
    $(this).width($('#tmp-width').html($(this).children(':selected').text()).width() + 30);
});


$('#pseudo-select div').html($('#pseudo-select select').children(':selected').text()).click(function () {
    $(this).siblings('select').prop('size', $(this).siblings('select').children('option').size()).toggle();
});
$('#pseudo-select select').change(function () {
    $(this).hide().siblings('div').html($(this).children(':selected').text());
});