jQuery - 在選擇列表中獲取選項的像素寬度？

以下我可以得到一個選擇輸入的寬度像素。是否有可能在選擇列表中獲得選項的寬度？謝謝jQuery - 在選擇列表中獲取選項的像素寬度？

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

更新 - 繼承人我想要這個的原因。我需要將文本置於選擇列表中。我不能做這個跨設備和瀏覽器與CSS文本對齊：中心;我唯一的選擇是使用文本縮進。由於我的網站有一個液體寬度和選項的長度不同，我需要動態計算這個值。所以，如果我可以獲得選擇選項文本的寬度，並且也獲得容器的寬度（更容易），那麼我可以計算出文本縮進應該是什麼。謝謝

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

來源

2012-05-14 Evans

沒有試圖猜測你的動機，但我很好奇：你爲什麼需要這樣做？ –

它的目的是什麼？ – gdoron

更新了我的問題。謝謝 – Evans

你可以選擇的選項的字符串長度，像這樣：

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

和特定索引元素（2此處）做到這一點：

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

另外，您可以採取選定的文本，把它放在一個不可見的div，然後獲得該div的寬度 - 使用正常的jquery寬度方法。

來源

2012-05-14 14:12:01 NimChimpsky

如果我用你的方法來獲取字符串的長度，有沒有辦法然後計算這些在屏幕上會佔用的像素寬度？ – Evans

@jdln imho只有一點hackery - 看到編輯 – NimChimpsky

酷，接受答案與減票，這一定是值得的徽章？ – NimChimpsky

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

這將真正返回第一個選項的寬度。使用更具選擇性的jQuery選擇器字符串來選擇適當的選項標記。

來源

2012-05-14 14:12:53 Teddy

並非所有'

@Teddy代碼總是返回0. – Evans

是的，但它有點像'width：auto;'。我認爲這與選項列表中最理想的選項有關。 – Teddy

我做了這樣的：

作出新<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; 
}

來源

2014-09-18 12:28:16 HerrSerker

下面介紹如何使用可變寬度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-08 06:46:14

jQuery - 在選擇列表中獲取選項的像素寬度？

回答

相關問題