从 jquery 移动选择菜单中获取最宽的选项宽度

Question

我有一个 jQuery 移动页面，带有一些选择菜单。在选择菜单中，我像往常一样有选项。

例如：

• 请选择一项
• 康柏
• 惠普
• 华硕
• `

等等……

当我打开页面时，选择菜单的宽度是Please select one，并且有一个小图标，一个向下的箭头。例如，当我将选项更改为HP 时，选择菜单会非常小（字体大小和所有其他内容都保留），整个选择菜单的宽度将是HP 文本和图标的宽度.

我想要实现的是获得最长的文本并将选择菜单的宽度设置为固定为该宽度。

就我而言，这应该是This is a longer text than others

使用 `$.(each, options)。

这是我累的：

$(document).on("pagecontainershow", function (event, ui) {
    var options = $('.ui-content .parameters .ui-select option');
    var maxWidth = 0;
    $.each(options, function (idx, obj) {
        console.log($(obj).text());
        console.log($(obj).outerWidth());
        //console.log($(obj).text().outerWidth()); This is what I really need, 
        //but there is no function like this
    });

});

问题是，我无法获得最长文本的宽度。有人可以帮我解决这个问题吗？

jQuery 或 CSS 也可以。

注意：我不需要文字的length，我需要文字的width。

Answer 1

当您不使用“data-inline=true”（将宽度设置为“自动”）以及将选择放入容器中并给出容器宽度

见Fiddle

css

#container {width:400px}

html

<div id="container" >
    <select id="selection">
        <option value="1">i'm short.</option>
        <option value="2">i'm kinda medium...</option>
        <option value="3">i'm large, or better: i'm huge!</option>
    </select>
</div>