Question

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

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

更新 - 这就是我想要的原因。我需要在选择列表中居中文本。我不能用css text-align：center来做这个跨设备和浏览器;我唯一的选择是使用text-indent。由于我的网站具有液体宽度并且选项具有不同的长度，因此我需要动态计算此值。

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

NimChimpsky的方法似乎工作正常。代码在这里：jQuery - function runs fine when fired on div click, but not on page load

Answer 1

我这样做了：

制作新的<span>对象
将文字设置为有问题的选项之一
从所选选项
将这些测量值设置为跨度
将跨度附加到正文
测量该跨度的宽度
删除范围

记住：
无法测量选择的向下箭头（三角形）。它是浏览器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 2

您可以获得所选选项的字符串长度，如下所示：

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

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

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

或者你可以选择文本，将它放在一个不可见的div中，然后使用普通的jquery宽度方法获得该div的宽度。

Answer 3

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

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

Answer 4

以下是如何使用可变宽度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是因为我在select元素上有自定义样式，每边有3个填充。在测量宽度时，它并没有考虑到这一点，因此需要对其进行硬编码。

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

4 个答案: