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

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

如果所选选项为“已选”，则宽度应为120px或其他值。 当用户选择“选择的选项非常大”时，

标签的宽度应增加

下面是示例代码，我正在尝试做的事情。

---

我还没有测试它，但我认为它应该可以工作。我假设你有多选下拉菜单

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

---

使用一些欺骗手段，您可以克隆所选选项的内容，测量其宽度并将“选择”调整为此宽度，如下所示：

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

$（'select'）。更改（函数（）{
var$opt=$（this.find（“选项：选中”）；
var$span=$（''）.addClass（'tester'）.text（$opt.text（））；
$span.css({
“字体系列”：$opt.css（'font-family'），
“字体样式”：$opt.css（“字体样式”），
“font-weight”：$opt.css（'font-weight'），
'font-size'：$opt.css（'font-size'）
});
$（'body'）。追加（$span）；
//30px用于选择打开图标-每个浏览器的图标可能略有不同
$（this.width（$span.width（）+30）；
$span.remove（）；
});
$（'select'）.change（）；

---

不幸的是，select options的“宽度”似乎始终为零，因此您无法执行此操作，也无法使用getBoundingRect。该死的HTML！另请参见或添加一个临时的选择和测量？