Javascript jQuery自动调整下拉列表宽度

因此，我正在通过jQuery更新下拉列表中某个项目的文本。因此，当我单击Save时，它会抓取所选项目并将文本更改为新值。当新值比上一个文本长时，下拉列表的宽度将正确增加以适合较长的文本。但是，如果选定项在下拉列表中具有最长的文本，并且新值现在较短，则下拉列表的宽度将保持不变，而不是减小。那么，有没有办法让它自动调整到下拉列表中最长的文本

为了进一步解释，这里有一个例子：

下拉列表加载为：

|Test Item 1     |
|Test Item 222222|
|Test Item 33    |

“Test Item 22222”仅保存为“Test Item”，我希望下拉列表如下所示：

|Test Item 1 |
|Test Item   |
|Test Item 33|

编辑-添加代码

---

如果没有任何html或css，这并没有多大帮助，但我建议那些有文本的元素将显示为块或内联块元素，并且父（容器）元素将不限于特定的宽度，这样他们可以自动更新。

迭代所有选项项并计算其文本的宽度。然后您可以选择最宽的，并设置下拉列表的宽度

您可以使用此jQuery插件计算文本宽度：

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

$.fn.textWidth=函数（）{
var html_org=$（this.html（）；
var html_calc=''+html_org+''；
$（this）.html（html\u calc）；
var width=$（this.find（'span:first'）.width（）；
$（this.html（html_org）；
返回宽度；
};

我使用JSFIDLE尝试过这个方法，似乎您可能在下拉列表中应用了一些样式（？）

看看这个：

这是我在JSFIDLE中使用的代码

<select id="s" size="3">
<option value="aaaaaaaaaaaaaaaaaaaaaa" selected="true">aaaaaaaaaaaaaaaaaaaaaa</option>
<option value="aaa">aaa</option>
<option value="aaaa">aaaa</option>
</select>​
<script>
    //FOR YUI
    YUI().use("node", function(Y){
        var nodes = Y.all("#s option");
        Y.later(2000, nodes.item(0), function(){
            nodes.item(0).set("value","a");
            nodes.item(0).setHTML("a");    
        });
    });

    //FOR JQUERY
    setTimeout(function(){
        $("#s option").eq(0).val("a").html("a");
    }, 2000);​
</script>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaa
aaaa
​
//给你
YUI（）。使用（“节点”，函数（Y）{
var节点=Y.all（#s选项）；
Y.later（2000，nodes.item（0），function（）{
节点。项（0）。设置（“值”、“a”）；
nodes.item（0.setHTML（“a”）；
});
});
//对于JQUERY
setTimeout（函数（）{
$（“#s选项”）.eq（0）.val（“a”）.html（“a”）；
}, 2000);​

---

2秒钟后，它会更新，下拉列表会自动更新它的宽度。

我不太确定你在说什么。我所说的下拉菜单，是指一个包含选项的简单html选择。我正在更改一个选项中的文本。您的第一句话是这样的，我正在通过jQuery更新下拉列表中某个项的文本。也许YUI在更改文本时做了jQuery不做的事情？不，像jQuery一样简单。它使用object.innerHTML而不是其他任何东西。那么，你知道你在YUI做的事情的等价物吗？我原以为它会是我写的，但显然它的工作原理不同。好了，删除YUI内容，只运行jquery。如果有效，请将其标记为正确，谢谢；）很抱歉，您的代码实际上没有调整大小，它只是更改选项的文本。我能做到。我的问题是它在IE8中不会自动调整大小。您所描述的应该可以工作，而不必调整任何宽度。看这个：我应该补充一点，这在IE8中不起作用。您是正确的，它确实调整了FF和Chrome中的宽度。

<select id="s" size="3">
<option value="aaaaaaaaaaaaaaaaaaaaaa" selected="true">aaaaaaaaaaaaaaaaaaaaaa</option>
<option value="aaa">aaa</option>
<option value="aaaa">aaaa</option>
</select>​
<script>
    //FOR YUI
    YUI().use("node", function(Y){
        var nodes = Y.all("#s option");
        Y.later(2000, nodes.item(0), function(){
            nodes.item(0).set("value","a");
            nodes.item(0).setHTML("a");    
        });
    });

    //FOR JQUERY
    setTimeout(function(){
        $("#s option").eq(0).val("a").html("a");
    }, 2000);​
</script>