如何根据所选选项更改下拉列表元素的宽度？

Question

我有一个很长的下拉菜单列表。 其中一些选项具有非常大的文本。我想根据所选选项使所选元素的宽度相应增加。

如果选择的选项是“Selected”，则宽度应该为120px或类似值。 当用户选择“Very Large Selected option”时，标签的宽度应该增加。这是示例代码，我想要实现的内容。 http://jsbin.com/axaka4/edit

- Wasim Shaikh

---

请参考https://dev59.com/9WIj5IYBdhLWcg3wmWG1。 - rogerdpack

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

这里有一个可行的示例

- mkilmanas

---

或者添加一个临时的选择器并测量它？https://dev59.com/bVjUa4cB1Zd3GeqPQlkB#6385741 - rogerdpack

Answer 2

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

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

- Vivek

---

不幸的是，似乎选择选项的“宽度”总是零，所以你不能这样做，也不能使用getBoundingRect。该死的HTML！ - rogerdpack