使用jQuery each填充不同类型表单失效问题排查

你遇到的问题很典型——每次循环调用$("#xe").html(...)都会完全替换掉#xe容器里的现有内容，而不是追加新的复选框。所以循环跑完后，自然只剩最后一次循环生成的那个复选框啦。

快速修复方案 #

把html()方法换成append()，同时在切换选项前先清空容器（避免不同选项的复选框叠加）：

$('select[name="scales"]').on('change',function(e){
    e.preventDefault();
    var scale = $(this).val();
    // 切换选项前先清空容器
    $("#xe").empty();
    
    switch(scale) {
        case 'shirtscale':
            var x = ['S','M','L','XL','XXL','XXXL','4XL','5XL','6XL','7XL','8XL','9XL','10XL'];
            $.each(x, function (index, value) {
                // 用append追加元素，而非html替换
                $("#xe").append("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });
            break;
        case 'ringscale':
            var x = ['3','3.5','4','4.5','5','5.5','6','6.5','7','7.5','8','8.5','9','9.5','10','10.5','11','11.5','12','12.5'];
            $.each(x, function (index, value) {
                $("#xe").append("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });
            break;
        case 'shoescale':
            var x = ['A','B','C','D','E','F','G'];
            $.each(x, function (index, value) {
                $("#xe").append("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });
            break;
        default:
            // 默认情况清空容器
            $("#xe").empty();
    }
    return false;
});

更优雅的优化版本 #

上面的代码虽然能解决问题，但有很多重复逻辑。我们可以把选项配置抽成对象，先拼接完整的HTML字符串再一次性插入（减少DOM操作次数，提升性能）：

$('select[name="scales"]').on('change',function(e){
    e.preventDefault();
    var scale = $(this).val();
    
    // 把所有尺寸选项统一管理
    const scaleOptions = {
        shirtscale: ['S','M','L','XL','XXL','XXXL','4XL','5XL','6XL','7XL','8XL','9XL','10XL'],
        ringscale: ['3','3.5','4','4.5','5','5.5','6','6.5','7','7.5','8','8.5','9','9.5','10','10.5','11','11.5','12','12.5'],
        shoescale: ['A','B','C','D','E','F','G']
    };
    
    $("#xe").empty();
    // 判断当前选中的scale是否有对应配置
    if (scaleOptions[scale]) {
        let checkboxHtml = '';
        scaleOptions[scale].forEach((value, index) => {
            // 用模板字符串拼接更清晰
            checkboxHtml += `<input id='${index}' type='checkbox' value='${value}'>`;
        });
        // 一次性插入所有复选框
        $("#xe").html(checkboxHtml);
    }
    return false;
});

补充说明 #

• 你的页面select里还有pantscale、waistscale等选项，上面的代码在默认情况会清空容器，符合“未选中对应尺寸时不显示复选框”的预期。
• 如果需要给复选框加上标签（比如显示尺寸文本），可以在拼接时加上<label for='${index}'>${value}</label>，让用户更直观看到选项内容。

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