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

A working fiddle here

Answer 2

我没有测试过，但我认为这应该可行。我假设你有多选下拉

 $("selectId").change(function () { 
         $("selectid option:selected").each(function () { 
                str = $(this).width(); 
                $('#selectId').width(str); 
          }); 
});

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

2 个答案: