动态调整选择列表的大小（Safari）

我想根据所选索引（字符串）所需的宽度调整选择列表的大小。举例来说，我有一个3字符串的列表，简短，中等，loooooong;我不希望选择列表自动地像它的最大元素一样宽，而应该和它所选的元素一样宽。动态调整选择列表的大小（Safari）

我试过的第一种方法：document.getElementById('selectList').style.width = (selectedText.length * 6) + 'px';其中selectedText是一个字符串，而6是对字符宽度的一个不好的估计。如果没有等宽字体，则无法正常工作。

我尝试的下一个方法是将offscreen div（top：-9999px）的innerHTML设置为所选索引，然后：document.getElementById('selectList').style.width = document.getElementById('hiddenDiv').offsetWidth; 此方法的问题在于宽度也不正确，与实际选择的字符串相比，长字符串使选择列表的路线变长。

任何想法如何根据字符串宽度/长度动态调整此选择列表的大小？

来源

2010-08-05 sgarman

你想要的元素来改变它的宽度，在同一行意味着一切，右边会跳来跳去，或者只是下拉部分？ – 2010-08-06 01:16:59

您可以在更改时使用所选选项值填充隐藏跨度，获取其宽度，然后将选择列表设置为该宽度。

Demo

来源

2010-08-05 21:06:57 cnanney

我刚刚意识到我使用jQuery进行演示，并且没有提到问题中的jQuery。所以，如果您使用jQuery，有一种方法可以实现它:) – cnanney 2010-08-05 21:09:32

如果您实际上将您的方法转换为javascript，则不起作用。 jQuery做了一些神奇的工作，并且在查看了jQuery源代码后，我无法确认它是如何实现它的。您无法获得javascript中隐藏跨度的CSS宽度，我认为您需要获取其clientHeight。 – sgarman 2010-08-06 17:58:26

动态调整选择列表的大小（Safari）

回答

相关问题