Javascript 如何增加/减少'；选择'；用户希望选择选项后的选项宽度

我有一个选择框，在这里我硬编码宽度。我想要根据所选文本的宽度。如果文本较长，则宽度会自动扩展；如果文本较短，则会根据其进行调整。这是我的密码

。发布选择{
边界：无；
-webkit外观：无；
-moz外观：无；
外观：无；
}

所有运动
光学字符识别
铁人三项
跑步和马拉松
超级马拉松
骑脚踏车兜风

$（文档）.ready（函数（）
{
$（“#discoverselect”）.change（函数（）
{
$（this）.width（textWidth（$（this）.find（“选项：选定”）.text（））+20）；
}).触发（“变更”）；
});
函数文本宽度（str）
{
变量span=$（“”+str+“”）；
$（“正文”）。追加（span）；
var width=span.width（）；
span.remove（）；
返回宽度；
};

如果可以找到长度，则可以根据字符更改宽度

查找长度

所有运动
光学字符识别
铁人三项
跑步和马拉松
超级马拉松
骑脚踏车兜风

实现这一点没有简单的方法。我试图用一种非常肮脏的方式接近它，如果你想亲自尝试的话：到目前为止你尝试了什么？您想在选择打开时或选择选项后调整宽度吗？谢谢GrafiCode Studio

$(document).ready(function()
{
    $("#discoverselect").change(function()
    {
        $(this).width(textWidth($(this).find("option:selected").text())+20);
    }).trigger("change");
});

function textWidth(str)
{
    var span = $("<span style='white-space: nowrap;'>"+str+"</span>");
    $("body").append(span);
    var width = span.width();
    span.remove();
    return width;
};

function textWidth(str){
    var span = $("<span>"+str+"</span>");
    $("body").append(span);
    var width = span.width();
    span.remove();
    return width;
    };