基于itemz[]的动态表单开发：实现字段复制与下拉框JSON填充

我来帮你搞定这个动态表单的需求，核心就是实现字段复制+下拉框从指定JSON加载数据对吧？下面是具体的实现步骤和代码示例，完全贴合你的需求：

1. 先调整HTML结构 #

首先给表单补全规范结构，加上「添加新字段」和「删除行」按钮（删除功能是实用补充），同时去掉重复的id属性（避免复制后冲突）：

<!-- 完整表单结构 -->
<table id="itemTable">
  <!-- DYNAMIX ITEMS-->
  <tbody class='container1'>
    <tr class="itemRow">
      <td>
        <!-- 用class标识下拉框，去掉唯一id -->
        <select name='itemz[]' class='itemz'>
        </select>
      </td>
      <td>
        <input class='form-control count' type='text' name='count[]' value='' placeholder="输入数量">
        <input class='form-control weight' type='hidden' name='weight[]' value=''>
      </td>
      <td>
        <button type="button" class="removeRow btn btn-sm btn-danger">删除</button>
      </td>
    </tr>
  </tbody>
</table>
<button type="button" id="addItemRow" class="btn btn-sm btn-primary mt-2">添加新字段</button>

2. 加载指定JSON数据到下拉框 #

假设你的目标JSON数据是这样的（直接替换成你自己的数据源即可）：

// 示例JSON：包含商品ID、名称、重量
const itemSource = [
  { "id": 1, "name": "商品A", "weight": 5.5 },
  { "id": 2, "name": "商品B", "weight": 10.2 },
  { "id": 3, "name": "商品C", "weight": 3.8 }
];

写个通用函数来给下拉框填充选项，初始化和复制新字段时都能用：

function fillSelectOptions(selectElem) {
  // 清空现有选项
  selectElem.innerHTML = '';
  // 添加默认提示项
  const defaultOpt = document.createElement('option');
  defaultOpt.value = '';
  defaultOpt.textContent = '请选择商品';
  selectElem.appendChild(defaultOpt);
  // 遍历JSON生成选项，同时把重量存在自定义属性里
  itemSource.forEach(item => {
    const opt = document.createElement('option');
    opt.value = item.id;
    opt.textContent = item.name;
    opt.dataset.weight = item.weight;
    selectElem.appendChild(opt);
  });
}

// 页面加载完成后初始化第一个下拉框
document.addEventListener('DOMContentLoaded', () => {
  fillSelectOptions(document.querySelector('.itemz'));
});

3. 下拉框选择时自动更新weight隐藏字段 #

选中商品后，自动把对应的重量填入同行的隐藏字段，不用手动赋值：

document.addEventListener('change', (e) => {
  if (e.target.classList.contains('itemz')) {
    const selectedOpt = e.target.options[e.target.selectedIndex];
    const weightInput = e.target.closest('.itemRow').querySelector('.weight');
    weightInput.value = selectedOpt.dataset.weight || '';
  }
});

4. 实现表单字段的复制（添加新行） #

点击按钮就能复制一行新的表单字段，同时自动填充下拉选项、清空输入值：

// 添加新行逻辑
document.getElementById('addItemRow').addEventListener('click', () => {
  const container = document.querySelector('.container1');
  const templateRow = document.querySelector('.itemRow');
  const newRow = templateRow.cloneNode(true);
  
  // 清空新行的输入内容
  newRow.querySelector('.count').value = '';
  newRow.querySelector('.weight').value = '';
  
  // 给新行的下拉框填充选项
  fillSelectOptions(newRow.querySelector('.itemz'));
  
  // 把新行加入表单
  container.appendChild(newRow);
});

// 删除行逻辑（至少保留一行）
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('removeRow')) {
    const rowTotal = document.querySelectorAll('.itemRow').length;
    if (rowTotal > 1) {
      e.target.closest('.itemRow').remove();
    }
  }
});

关键细节说明 #

• 去掉了下拉框的id：因为id是页面唯一的，复制后会导致冲突，用class标识更合理
• 重量存在data-weight属性：选中商品时直接读取，不用重复遍历JSON，效率更高
• 复制字段时清空输入值：避免把原有行的内容带过去
• 后端接收：itemz[]、count[]、weight[]会以数组形式传递，直接按数组处理即可

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