1

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

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

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

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

NimChimpsky 的方法似乎效果很好。代码在这里：jQuery - 在 div 点击时触发函数运行良好，但在页面加载时不运行

4

4 回答 4

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;
}
于 2014-09-18T12:28:16.220 回答
0

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

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

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

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

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

于 2012-05-14T14:12:01.180 回答
0 
$('#mySelect > option').width();

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

于 2012-05-14T14:12:53.123 回答
0

以下是如何拥有一个可变宽度的 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 个填充。在测量宽度时，它没有考虑到这一点，因此需要对其进行硬编码。

于 2015-01-08T06:46:14.863 回答