如何使用jQuery根据用户输入值动态生成对应数量的输入DIV

问题核心错误 #

• 直接删除了#user节点，后续找不到该节点无法生成新输入框
• 循环内仅执行显示操作，没有创建新的输入框节点
• 所有输入框共用同一个id，不符合规范，后续取值会出错
• 原代码中表单类名from-control拼写错误，会导致样式失效

修改后的完整代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="info">
    <div class="col-lg-12 mb-30">
        <label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br>
            <div class="input-group-prepend">
                <input class="form-control" type="number" placeholder="2" id="user_num" required >
            </div>
    </div>
    <!-- 生成的输入框存放容器 -->
    <div id="user-container"></div>
    <!-- 输入框模板，默认隐藏不显示 -->
    <div class="col-lg-12 mb-30 user-item" id="user-template" style="display:none;">
        <label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br>
            <div class="input-group-prepend">
                <input class="form-control name-item" type="text" required >
            </div>
    </div>

</div>

JS代码 #

$("#user_num").change(function() {
    let count = parseInt($(this).val()) || 0;
    // 先清空已生成的所有输入框
    $("#user-container").empty();
    // 按最新数量生成对应输入框
    for (let i = 0; i < count; i++) {
        // 克隆模板节点，移除模板id、取消隐藏
        let newInput = $("#user-template").clone().removeAttr('id').show();
        // 给输入框设置唯一name标识，方便后续取值
        newInput.find('.name-item').attr('name', 'user_name_' + i);
        // 插入到容器中
        $("#user-container").append(newInput);
    }
});

功能说明 #

• 用户输入数量后会自动生成对应数量的姓名输入框，修改数量时会自动增减匹配
• 所有输入框带唯一标识，表单提交时可正常获取全部姓名值
• 输入数值为0时自动隐藏所有输入框，边界场景兼容正常

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