Question

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

只是为了进一步解释，这是一个例子：

下拉列表加载为：

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

“测试项目222222”被保存为“测试项目”，我希望下拉列表看起来像：

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

编辑 - 添加代码

if ($("input[class~='ButtonPressed']").val() == "Save") {
    // Save the selected item in the dropdown
    var index = $("#Select").get(0).selectedIndex;
    $("#Select option:eq(" + index + ")").text($("#Name").val());
}

Answer 1

没有任何html或css它没有太多的帮助，但我建议的是那些有文本的元素将显示为块或内联块元素和父（容器）元素不会被限制为特定的宽度，这样他们就可以自动更新。

Answer 2

遍历所有选项并计算其文本的宽度。然后，您可以采用最宽和设置的下拉宽度。

您可以使用此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;
};

Answer 3

我使用JSFiddle试过这个，看起来你可能会有一些样式应用于你的下拉列表（？）。

检查出来：http://jsfiddle.net/XQfmL/

这是我在JSFiddle中使用的代码。

<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>

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

jQuery自动调整下拉宽度

3 个答案: