如何用jQuery为不同下拉框存储关联数据避免覆盖？

你的核心问题在于用单个对象存储数据，每次切换下拉选项都会覆盖之前的type值，备注也只能保留当前内容，自然没法留存多组关联条目。我们可以改成用数组存储所有条目，同时维护一个当前正在编辑的条目对象，这样就能实现每次切换下拉时新增/归档一个关联记录。

修改后的代码实现 #

<select id="dpselect">
  <option value="technical">Technical</option>
  <option value="memory">memory link</option>
  <option value="version">version</option>
</select>
<textarea id="Note" rows="4" cols="60" maxlength="250"></textarea>
<button id="saveAll">保存所有条目到数据库</button>

// 用数组存储所有关联条目，每个元素是 {type: '', note: ''} 的对象
var dataList = [];
// 跟踪当前正在编辑的条目，初始化默认选中的下拉项
var currentItem = {
  type: $('#dpselect').val(),
  note: ''
};

// 下拉框切换事件：归档当前条目，开始新的编辑
$('#dpselect').change(function() {
  var newType = $(this).val();
  
  // 如果当前条目有有效内容，先存入数组
  if (currentItem.type && currentItem.note.trim() !== '') {
    // 用扩展运算符拷贝对象，避免后续修改影响已存入数组的条目
    dataList.push({...currentItem});
  }
  
  // 初始化新的当前条目
  currentItem = {
    type: newType,
    note: ''
  };
  
  // 清空备注框，方便输入新内容
  $('#Note').val('');
});

// 备注框失去焦点时，更新当前条目的备注内容
$('#Note').blur(function() {
  currentItem.note = $(this).val().trim();
});

// 统一保存到数据库的触发事件
$('#saveAll').click(function() {
  // 最后把当前正在编辑的有效条目也加入数组
  if (currentItem.type && currentItem.note.trim() !== '') {
    dataList.push({...currentItem});
  }
  
  // 这里可以把dataList提交到数据库，示例用console打印查看
  console.log('待保存的所有条目：', dataList);
  // $.post('/your-save-api', {data: dataList}, function(response) {
  //   // 处理保存后的回调逻辑
  // });
});

关键逻辑说明 #

• 数组存储多条目：dataList数组用来保存所有用户编辑过的type+note关联记录，每个元素都是独立对象，不会互相覆盖。
• 当前条目跟踪：currentItem专门记录用户正在编辑的下拉项和对应备注，切换下拉时先归档已有内容，再初始化新条目。
• 对象拷贝：用{...currentItem}拷贝对象，避免后续修改currentItem时影响已存入数组的历史条目。
• 边界处理：切换下拉和保存时都会判断条目是否有效，避免存入空的无效记录。

这样就能实现你要的「每次切换下拉选项新增关联条目，最后统一保存」的需求啦～

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