如何根据下拉菜单的数值生成对应数量的文本框？

核心问题分析 #

你的代码没生效主要有三个原因：

• 没有引入jQuery库，导致$函数无法识别
• 缺少初始隐藏文本框容器的CSS，页面加载时所有文本框都默认显示
• 脚本放在DOM元素之前，元素还未加载完成，事件绑定失败

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <!-- 先引入jQuery库，可从jQuery官网下载后本地引入，或使用官方提供的CDN地址 -->
    <script src="jquery-3.7.1.min.js"></script>
    <style>
        /* 初始隐藏所有文本框容器 */
        .types {
            display: none;
        }
    </style>
</head>
<body>
    <select class="medium" id="elementreg" name="IDs">
        <option value="" selected="selected"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <div class="types" id="1">
        <input name="First Chip ID" placeholder="First Chip ID">
    </div>

    <div class="types" id="2">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
    </div>

    <div class="types" id="3">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
        <input name="Third Chip ID" placeholder="Third Chip ID">
    </div>

    <div class="types" id="4">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
        <input name="Third Chip ID" placeholder="Third Chip ID">
        <input name="Fourth Chip ID" placeholder="Fourth Chip ID">
    </div>

    <!-- 脚本放在DOM元素之后，确保元素已加载完成再绑定事件 -->
    <script>
        $("#elementreg").on("change", function() {
            var val = $(this).val();
            
            $(".types").hide().find('input').val(''); 
            if (val) $("#" + val).show();
        });
    </script>
</body>
</html>

关键修改说明 #

• 引入jQuery：你的代码使用了jQuery的$选择器和事件绑定方法，必须先引入jQuery库才能生效，可直接从官网下载文件放到项目目录中引用
• 添加CSS：.types { display: none; } 会在页面加载时隐藏所有文本框容器，只有选中对应选项后才会显示
• 调整脚本位置：把脚本移到页面底部（所有DOM元素之后），确保绑定事件时#elementreg元素已经存在；也可以用$(document).ready(function(){ ... })包裹脚本，效果一致
• 优化输入体验：给input添加placeholder属性，让用户更清楚每个输入框的用途

可选原生JS方案（无需jQuery） #

如果不想依赖jQuery，用原生JavaScript也能实现相同功能：

<!DOCTYPE html>
<html>
<head>
    <style>
        .types {
            display: none;
        }
    </style>
</head>
<body>
    <select class="medium" id="elementreg" name="IDs">
        <option value="" selected="selected"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <div class="types" id="1">
        <input name="First Chip ID" placeholder="First Chip ID">
    </div>

    <div class="types" id="2">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
    </div>

    <div class="types" id="3">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
        <input name="Third Chip ID" placeholder="Third Chip ID">
    </div>

    <div class="types" id="4">
        <input name="First Chip ID" placeholder="First Chip ID">
        <input name="Second Chip ID" placeholder="Second Chip ID">
        <input name="Third Chip ID" placeholder="Third Chip ID">
        <input name="Fourth Chip ID" placeholder="Fourth Chip ID">
    </div>

    <script>
        const selectElement = document.getElementById('elementreg');
        const typeContainers = document.querySelectorAll('.types');

        selectElement.addEventListener('change', function() {
            const val = this.value;
            
            // 隐藏所有容器并清空输入框
            typeContainers.forEach(container => {
                container.style.display = 'none';
                const inputs = container.querySelectorAll('input');
                inputs.forEach(input => input.value = '');
            });
            
            // 显示选中的容器
            if (val) {
                document.getElementById(val).style.display = 'block';
            }
        });
    </script>
</body>
</html>

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