动态增删HTML表单下拉选框联动输入框值异常求助

问题诊断 #

你的代码存在两个核心问题导致所有行价格同步变化：

1. 重复ID冲突：动态新增的行里，select和input都使用了重复的id="cars"、id="price"，HTML规范要求ID必须唯一，这会导致选择器无法精准定位元素。
2. 事件逻辑错误：当前change事件中，你遍历了所有cars[]下拉框，并且用$(price)（实际会选中所有class为price的输入框）设置值，相当于每次修改都会把所有价格输入框统一覆盖。

修复方案 #

1. 移除重复ID，改用class定位

把新增行模板和初始行里的id="cars"、id="price"删除，保留class用于元素定位。

2. 重构change事件逻辑

• 只处理当前触发change事件的下拉框，无需遍历所有下拉框
• 通过DOM相对关系，找到当前下拉框所在行的价格输入框
• 用对象映射替代多个if-else，让代码更简洁易维护

修改后的完整代码 #

<html>
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 移除模板里的重复ID，保留必要属性
            var html = '<tr><td><input class="form-control" type="text" name="txtFullname[]" required=""></td><td><input class="form-control" type="text" name="txtEmail[]" required=""></td><td><input class="form-control" type="text" name="txtPhone[]" required=""></td><td><input class="form-control" type="text" name="txtAddress[]" required=""></td><td><select class="form-control cars" name="cars[]"><option value="" disabled selected>--Select--</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select></td><td><input class="form-control price" type="text" name="price[]" required=""></td><td><input class="btn btn-danger" type="button" name="remove" value="Remove" required=""></td></tr>';
            var x = 1;
            var max = 5;
            $("#add").click(function() {
                if (x <= max) {
                    $("#table_field").append(html);
                    x++
                }
            });
            $("#table_field").on('click', '[name="remove"]', function() {
                $(this).closest('tr').remove();
                x--;
            });
        });

        // 价格映射表，替代冗余的if-else判断
        const carPrices = {
            volvo: 125000000,
            saab: 145000000,
            mercedes: 165000000,
            audi: 185000000
        };

        $(document).on('change', 'select[name="cars[]"]', function() {
            const $currentSelect = $(this);
            // 定位当前下拉框所在行的价格输入框
            const $targetPriceInput = $currentSelect.closest('tr').find('.price');
            const selectedCar = $currentSelect.val();
            // 有选中值则设置对应价格，无选中值清空输入框
            $targetPriceInput.val(selectedCar ? carPrices[selectedCar] : '');
        });
    </script>
</head>
<body>
    <div class="container">
        <form class="insert-form" id="insert_form" method="post" action="">
            <hr>
            <h1 class="text-center">Dynamically add input field & insert data</h1>
            <hr>
            <div class="input-field">
                <table class="table table-bordered" id="table_field">
                    <tr>
                        <th>Full Name</th>
                        <th>Email Address</th>
                        <th>Phone No</th>
                        <th>Address</th>
                        <th>Cars</th>
                        <th>Price</th>
                        <th>Add or Remove</th>
                    </tr>
                    <tr>
                        <td><input class="form-control" type="text" name="txtFullname[]" required=""></td>
                        <td><input class="form-control" type="text" name="txtEmail[]" required=""></td>
                        <td><input class="form-control" type="text" name="txtPhone[]" required=""></td>
                        <td><input class="form-control" type="text" name="txtAddress[]" required=""></td>
                        <td><select class="form-control cars" name="cars[]">
                                <option value="" disabled selected>--Select--</option>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </select></td>
                        <td><input class="form-control price" type="text" name="price[]" required=""></td>
                        <td><input class="btn btn-warning" type="button" name="add" id="add" value="Add" required=""></td>
                    </tr>
                </table>
                <center>
                    <input class="btn btn-success" type="submit" name="save" id="save" value="Save Data">
                </center>
            </div>
        </form>
    </div>
</body>
</html>

关键修改点说明 #

• 移除所有重复ID，避免DOM选择器冲突
• 用carPrices对象统一管理车型价格，后续新增车型只需修改该对象
• change事件仅处理当前操作的下拉框，通过.closest('tr')精准定位当前行，确保只修改对应行的价格输入框
• 移除原代码中多余的遍历逻辑，提升性能同时避免批量修改错误

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