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

Question

我有一个下拉菜单的大列表.一些选项具有非常大的文本.我想根据所选的选项制作所选元素的宽度.

如果所选选项为"已选择",则宽度应为120px或其他值.当用户选择"非常大的选择选项"时,<select>标签的宽度应该增加.

这是示例代码,我正在尝试做什么. http://jsbin.com/axaka4/edit

Answer 1

使用一些作弊你可以克隆所选选项的内容,测量它的宽度并调整大小选择这个宽度,如下所示:

$('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();

这是一个工作小提琴