jQuery - 在选择列表中获取选项的像素宽度？

Question

通过以下内容，我可以获得选择输入的宽度（以像素为单位）。是否可以在选择列表中获取选项的宽度？谢谢

$('#mySelect').width();

更新 - 这就是我想要这个的原因。我需要在选择列表中居中文本。我无法使用 css text-align: center; 跨设备和浏览器执行此操作我唯一的选择是使用文本缩进。由于我的站点具有流动宽度并且选项具有不同的长度，因此我需要动态计算此值。

所以，如果我可以获得选择选项文本的宽度，并且还可以获得容器的宽度（容易得多），那么我可以计算出文本缩进应该是什么。谢谢

NimChimpsky 的方法似乎运行良好。代码在这里：jQuery - function runs fine when fired on div click, but not on page load

Answer 1

以下是如何拥有一个可变宽度的 html 选择器标签，该标签仅扩展和收缩到所选项目所需的宽度。我没有测试浏览器的兼容性，因为它只需要在 iOS8 上的 Safari 中工作，但我确信这是可能的。

选择器的 HTML

<select id="hack1">
    <option>short option</option>
    <option>loooong looking loooong option</option>
    <option>Longer option but more like the longest</option>
    <option>Medium length selector</option>
</select>

HTML 在底部

<select id="hackselect">
    <option></option>
</select>

CSS

#hackselect {
    visibility: hidden;
}

jQuery

$('#hack1').change(function(event) {
    $("#hackselect option:first").text($("#hack1 option:selected").text());
    $('#hack1').css('width', $('#hackselect').width() + 6);
});

最后一行代码中的 + 6 在那里，因为我在选择元素上有自定义样式，每边有 3 个填充。测量宽度的时候没有考虑这个，所以需要硬编码进去。

Answer 2

我是这样设计的：

1. 创建一个新的<span> 对象
2. 将文本设置为相关选项之一
3. 从选定的选项中获取与文本宽度相关的计算样式值
4. 将这些测量值设置为跨度
5. 将跨度附加到正文
6. 测量该跨度的宽度
7. 删除跨度

记住：
无法测量选择的向下箭头（三角形）。它是浏览器 chrome 的一部分。大约 30 像素的魔法值是合理的。

var getOptionWidth = function(opt) {
    var styleProps = [
        'font-family',
        'font-kerning',
        'font-size',
        'font-stretch',
        'font-style',
        'font-variant',
        'font-variant-ligatures',
        'font-weight',
        'text-transform',
        'letter-spacing',
        'word-spacing',
        'padding-left',
        'padding-right'
    ];
    var o = $('<span>')
        .text($(opt).text());
    for (var i=0; i < styleProps.length; i++) {
        o.css(styleProps[i], $(opt).css(styleProps[i]));
    }
    o.appendTo('body');
    var w = o.width();
    o.remove();
    return w;
}

Answer 3

您可以像这样获取所选选项的字符串长度：

 ("#mySelect option:selected").text().length

对于特定的索引元素（此处为 2）执行此操作：

$("#mySelect option[value='2']").text().length

或者，您可以选择文本，将其放入不可见的 div 中，然后获取该 div 的宽度 - 使用普通 jquery 宽度方法。

Answer 4

$('#mySelect > option').width();

这将真正返回第一个选项的宽度。使用更具选择性的 jQuery 选择器字符串来选择适当的选项标签。