1

因此，我正在通过 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());
}
4

3 回答 3

0

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

于 2012-12-19T14:35:53.210 回答
0

遍历所有选项并计算其文本的宽度。然后你可以采用最宽和最宽的下拉菜单。

你可以使用这个 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;
};
于 2012-12-19T14:40:42.043 回答
0

我已经使用 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 秒后它会更新，下拉菜单会自动更新它的宽度。

于 2012-12-19T14:52:19.617 回答