如何根据所选选项更改选择元素的宽度？

我有一个很大的下拉菜单列表。 某些选项的文本非常大。我想根据所选选项设置所选元素的宽度。

如果所选选项是“Selected”，那么宽度应该是 120px 之类的。 当用户选择“非常大的选定选项”时，宽度大于<select>标签应该增加。

这是示例代码，我正在尝试做的事情。http://jsbin.com/axaka4/edit http://jsbin.com/axaka4/edit

使用一些作弊，您可以克隆所选选项的内容，测量其宽度并将选择大小调整为该宽度，如下所示：

$('select').change(function(){
    var $opt = $(this).find("option:selected");
    var $span = $('<span>').addClass('tester').text($opt.text());

    $span.css({
        'font-family' : $opt.css('font-family'),
        'font-style' : $opt.css('font-style'),
        'font-weight' : $opt.css('font-weight'),
        'font-size' : $opt.css('font-size')
    });

    $('body').append($span);
    // The 30px is for select open icon - it may vary a little per-browser
    $(this).width($span.width()+30);
    $span.remove();
});

$('select').change();

这里有一个工作小提琴 http://jsfiddle.net/5AANG/4/