基于Struts 1与JQuery实现select动态宽度适配问题求助

1. 准确定位目标Select控件 #

Struts 1的html:select标签设置property="sapplication"后，生成的HTML中name属性格式为[表单对应FormBean名称].sapplication（比如orderForm.sapplication）。如果直接用name="sapplication"精确匹配会找不到元素，改用属性后缀匹配选择器即可覆盖所有页面的目标控件：

$('select[name$=".sapplication"]')

2. 确保代码在DOM加载完成后执行 #

老旧项目常出现JS代码执行时DOM未加载完毕的情况，导致元素无法选中。把代码包裹在$(document).ready()中：

$(document).ready(function() {
    // 宽度适配逻辑写在这里
});

3. 实现宽度适配逻辑 #

创建隐藏的辅助元素计算文本宽度，实现默认200px、选中后自动适配的效果：

$(document).ready(function() {
    // 创建隐藏span用于计算文本宽度
    var $textSpan = $('<span style="position:absolute; visibility:hidden; white-space:nowrap;"></span>').appendTo('body');
    
    // 选中所有目标select
    var $targetSelects = $('select[name$=".sapplication"]');
    
    // 设置默认宽度
    $targetSelects.css('width', '200px');
    
    // 定义宽度调整函数
    function adjustSelectWidth($select) {
        var selectedText = $select.find('option:selected').text();
        $textSpan.text(selectedText);
        // 加10px预留空间，同时保证最小宽度为200px
        var textWidth = $textSpan.width() + 10;
        $select.css('width', Math.max(textWidth, 200) + 'px');
    }
    
    // 页面加载时初始化所有select宽度
    $targetSelects.each(function() {
        adjustSelectWidth($(this));
    });
    
    // 绑定change事件，选中选项后自动调整宽度
    $targetSelects.on('change', function() {
        adjustSelectWidth($(this));
    });
});

4. 全局引入代码，无需逐个修改页面 #

找到项目中所有JSP页面都会引入的公共组件（比如common.jsp、header.jsp或footer.jsp），将上述JQuery代码添加到该文件中。所有53个页面会自动加载这段代码，无需逐一修改。

额外注意事项 #

• 确认项目已引入JQuery库：老旧Java项目建议用JQuery 1.x版本（如1.12.4），避免兼容性问题；若未引入，同样在公共页面中添加引入代码。
• 适配超长文本：如果存在超过100字符的选项，可调整Math.max(textWidth, 200)中的数值，或添加最大宽度限制（比如Math.min(textWidth, 500)）。

内容的提问来源于stack exchange，提问作者m3t4l