如何用JavaScript关联表单中两个输入控件的值？

看起来你是想实现「下拉框选中选项时同步更新文本框的值，文本框输入值时同步选中下拉框对应选项」的功能，但因为两个控件的change事件互相触发更新，导致了循环调用的问题。先分析下你当前代码里的小问题：你的cc02（文本框）的change事件逻辑写的是cc02.value = cc03.value，这其实是把用户输入的文本又改回下拉框当前值，既不符合关联需求，也容易触发额外的事件回调。

下面给你两种可行的解决方案，帮你避免循环触发：

方案一：用标志位跳过内部更新的事件回调 #

我们可以设置一个全局标志，当我们通过代码主动更新控件值时，跳过事件的执行，这样就不会形成循环：

let cc02 = document.getElementById('cc02');
let cc03 = document.getElementById('cc03');
let isSyncing = false; // 标记是否正在同步控件值

// 下拉框切换时，同步更新文本框
cc03.addEventListener('change', () => {
  if (isSyncing) return;
  isSyncing = true;
  cc02.value = cc03.value;
  isSyncing = false;
});

// 文本框值改变时，同步选中下拉框对应选项
cc02.addEventListener('change', () => {
  if (isSyncing) return;
  isSyncing = true;
  // 找到与文本框值匹配的下拉选项
  const matchedOption = Array.from(cc03.options).find(opt => opt.value === cc02.value);
  if (matchedOption) {
    cc03.selectedIndex = matchedOption.index;
  }
  isSyncing = false;
});

方案二：判断值是否需要更新，避免无意义赋值 #

另一种思路是，在更新控件值之前先判断当前值是否已经符合预期，如果已经一致就不执行赋值操作，这样就不会触发额外的change事件：

let cc02 = document.getElementById('cc02');
let cc03 = document.getElementById('cc03');

// 下拉框切换时同步文本框
cc03.addEventListener('change', () => {
  if (cc02.value !== cc03.value) {
    cc02.value = cc03.value;
  }
});

// 文本框值改变时同步下拉框
cc02.addEventListener('change', () => {
  const matchedOption = Array.from(cc03.options).find(opt => opt.value === cc02.value);
  // 只有找到匹配项且当前选中项不同时才更新
  if (matchedOption && cc03.selectedIndex !== matchedOption.index) {
    cc03.selectedIndex = matchedOption.index;
  }
});

额外优化：支持实时输入同步 #

如果需要文本框输入时实时同步下拉框（而不是失去焦点时才触发），可以把文本框的change事件换成input事件：

cc02.addEventListener('input', () => {
  const matchedOption = Array.from(cc03.options).find(opt => opt.value === cc02.value);
  if (matchedOption && cc03.selectedIndex !== matchedOption.index) {
    cc03.selectedIndex = matchedOption.index;
  }
});

内容的提问来源于stack exchange，提问作者Iasi Edgardo Salomon