Question

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

例如：

请选择一个
康柏
HP
华硕
`

等...

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

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

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

使用`$。（每个，选项）。

这就是我累了：

$(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

当您不使用＆＃34; data-inline = true＆＃34;时，您应该能够将选择调整为固定宽度，这会将宽度设置为＆＃34; auto＆＃34; ，当你将选择放在一个容器中并给容器一个宽度

请参阅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>

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

1 个答案: