如何根據所選選項更改選擇元素的寬度？

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

這是一個工作小提琴

Answer 2

我沒有測試它，但我認為這應該工作。我假設你有多選下拉列表

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