Jquery动态表单系列：表单字段动态切换

前面写了一篇表单的进阶应用--动态追加，可能有一些同学不知道那种复杂的字段要怎么保存啊，这个在数据库设计阶段看你要用varchar还是json，在工作中很经常会有这种一大坨东西要存，在上一篇中sku没有实际需要细分到每一个属性值，在做电商类的同学就需要注意这些需要细化有库存要求的，但是原理都是一样的，后期有机会给大家详细展开说说

一、组件来源

这个组件大家肯定也是会看到，虽然我看到的不多，他是用来切换不同表单的，比如在select中有好几个option，选择不同的option会切换不同的字段。

比如：做实名认证时：身份证认证需要输入姓名跟身份证号码、验证码

银行卡认证需要输入卡号、验证码

这样我们就需要做切换表单啦，需要用到的字段不一样

有现成的ui比如我公司用的饿了么ui这个大家上班以后就基本会换到这些了，但是写这个文章是用来给部分学生（楼主上学就没教vue，本身楼主是数学专业，据我所知大部分的学校都还在教很老很老的东西）

组件效果

话不多说先给大家看看这个组件效果

有很多选项

选择：文本框

选择：图片

选择不同的option会有不同的字段需要填写

二、效果实现

1.引入Jquery并写好模板

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

html页面

<div class="container mt-4">
    <h4>选择模式</h4>
    <select id="templateSelect" class="form-control">
        <option value="">请选择模式</option>
        <option value="template1">密码模式</option>
        <option value="template2">密钥模式</option>
    </select>

    <div id="dynamicForm" class="mt-4"></div>
</div>

效果：

Js实现功能

<script>
$(document).ready(function() {
    $('#templateSelect').on('change', function() {
        var selectedTemplate = $(this).val();
        $('#dynamicForm').empty(); // 清空现有的表单

        if (selectedTemplate === 'template1') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>账号：</label>
                    <input type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="text" class="form-control" placeholder="请输入密码">
                </div>
            `);
        } else if (selectedTemplate === 'template2') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>密钥：</label>
                    <input type="text" class="form-control" placeholder="请输入密钥">
                </div>
            `);
        }
    });
});
</script>

2.完整代码

效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>动态表单</title>
</head>
<body>

<div class="container mt-4">
    <h4>选择模式</h4>
    <select id="templateSelect" class="form-control">
        <option value="">请选择模式</option>
        <option value="template1">密码模式</option>
        <option value="template2">密钥模式</option>
    </select>

    <div id="dynamicForm" class="mt-4"></div>
</div>

<script>
$(document).ready(function() {
    $('#templateSelect').on('change', function() {
        var selectedTemplate = $(this).val();
        $('#dynamicForm').empty(); // 清空现有的表单

        if (selectedTemplate === 'template1') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>账号：</label>
                    <input type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="text" class="form-control" placeholder="请输入密码">
                </div>
            `);
        } else if (selectedTemplate === 'template2') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>密钥：</label>
                    <input type="text" class="form-control" placeholder="请输入密钥">
                </div>
            `);
        }
    });
});
</script>

</body>
</html>

三、功能优化完善

分析：

我们的表单正常不会就只有这几个字段，还有其他的好多好多，这时候我们就需要做到切换我们要切换的字段，其他不需要动。这时候有两种实现方式，如下图我们的验证码始终都要在

改进：

方法一：字段较少时一起写进Js模板

把模板写到JavaScript里：

<script>
$(document).ready(function() {
    $('#templateSelect').on('change', function() {
        var selectedTemplate = $(this).val();
        $('#dynamicForm').empty(); // 清空现有的表单

        if (selectedTemplate === 'template1') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>账号：</label>
                    <input type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="password" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label>验证码：</label>
                    <input type="text" class="form-control" placeholder="请输入验证码">
                </div>
            `);
        } else if (selectedTemplate === 'template2') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>密钥：</label>
                    <input type="text" class="form-control" placeholder="请输入密钥">
                </div>
                <div class="form-group">
                    <label>验证码：</label>
                    <input type="text" class="form-control" placeholder="请输入验证码">
                </div>
            `);
        }
    });
});
</script>

方法二：字段较多时，在html里面加字段

html：用dynamicForm去定位

<div class="container mt-4">
    <h4>选择模式</h4>
    <select id="templateSelect" class="form-control">
        <option value="">请选择模式</option>
        <option value="template1">密码模式</option>
        <option value="template2">密钥模式</option>
    </select>

    
    <div id="dynamicForm"></div>
    <div class="form-group mt-4">
        <label>验证码：</label>
        <input type="text" class="form-control" placeholder="请输入验证码">
    </div>

</div>

Js：

<script>
$(document).ready(function() {
    $('#templateSelect').on('change', function() {
        var selectedTemplate = $(this).val();
        $('#dynamicForm').empty(); // 清空现有的表单

        if (selectedTemplate === 'template1') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>账号：</label>
                    <input type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="password" class="form-control" placeholder="请输入密码">
                </div>
            `);
        } else if (selectedTemplate === 'template2') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>密钥：</label>
                    <input type="text" class="form-control" placeholder="请输入密钥">
                </div>
            `);
        }
    });
});
</script>

修改后的完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>动态表单</title>
</head>
<body>

<div class="container mt-4">
    <h4>选择模式</h4>
    <select id="templateSelect" class="form-control">
        <option value="">请选择模式</option>
        <option value="template1">密码模式</option>
        <option value="template2">密钥模式</option>
    </select>

    
    <div id="dynamicForm"></div>
    <div class="form-group mt-4">
        <label>验证码：</label>
        <input type="text" class="form-control" placeholder="请输入验证码">
    </div>

</div>

<script>
$(document).ready(function() {
    $('#templateSelect').on('change', function() {
        var selectedTemplate = $(this).val();
        $('#dynamicForm').empty(); // 清空现有的表单

        if (selectedTemplate === 'template1') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>账号：</label>
                    <input type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="password" class="form-control" placeholder="请输入密码">
                </div>
            `);
        } else if (selectedTemplate === 'template2') {
            $('#dynamicForm').append(`
                <div class="form-group">
                    <label>密钥：</label>
                    <input type="text" class="form-control" placeholder="请输入密钥">
                </div>
            `);
        }
    });
});
</script>

</body>
</html>

总结

这就是一个比较完整的字段动态切换，还是考验新手朋友数据库设计能力，可以都放在同一个字段下用json存，也可以多开几个字段浪费一下看自己喜欢什么样的

希望通过这个项目，能让你学会了如何使用 jQuery 动态添加和管理表单元素，增强了对 Bootstrap 网格系统的理解。未来可以进一步扩展功能，例如添加表单验证、样式优化等。