如何将doublethedonation组件的公司名称值传递至指定输入框？

问题 #

现有第三方代码实现公司搜索功能，选择公司前后DOM结构变化如下：

选择前DOM结构 #

<div class="mb-m" id="dd-company-name-input" data-doublethedonation-widget-id="G__2">
    <div class="dtd-streamlined-plugin">
      <input type="hidden" name="doubledonation_status" value="no_interaction">
      <input type="hidden" name="doublethedonation_status" value="no_interaction">
      <input type="hidden" name="doublethedonation_entered_text">
      <input type="hidden" name="doubledonation_company_id">
      <input type="hidden" name="doubledonation_company_id">
      <input type="hidden" name="doubledonation_company_name">
      <input type="hidden" name="doubledonation_company_name">

      <div style="width: 100%; margin-bottom: 0px;" class="dtd-search-box">
        <div aria-live="assertive" style="display: block; font-size: 0px; color: rgb(255, 255, 255); opacity: 0; position: absolute; height: 0px; margin: 0px; z-index: -99999;"></div>
        <div aria-live="polite" style="display: block; font-size: 0px; color: rgb(255, 255, 255); opacity: 0; position: absolute; height: 0px; margin: 0px; z-index: -99999;"></div>
        <input role="listbox" aria-expanded="false" name="doublethedonation_company_name_input" autocomplete="new-password" type="text" style="width: 100%;" id="dd-input" class="dtd-search-input form-control BBFormTextbox" aria-label="Search company" placeholder="Search company name...">
      </div>

    </div>
  </div>

选择后DOM结构 #

<div class="mb-m" id="dd-company-name-input" data-doublethedonation-widget-id="G__2">
    <div class="dtd-streamlined-plugin">
      <input type="hidden" name="doubledonation_status" value="found">
      <input type="hidden" name="doublethedonation_status" value="found">
      <input type="hidden" name="doublethedonation_entered_text" value="goog">
      <input type="hidden" name="doubledonation_company_id" value="94">
      <input type="hidden" name="doubledonation_company_id" value="94">
      <input type="hidden" name="doubledonation_company_name" value="Google Inc.">
      <input type="hidden" name="doubledonation_company_name" value="Google Inc.">

      <p class="dtd-company-selected">Company selected: <strong class="dtd-company-selected-name">Google Inc.</strong>. <span class="wrongcompany">
          <a href="javascript:void(0);">Select a different company</a>
        </span>
      </p>
      
    </div>
</div>

需求是把name="doubledonation_company_name"的隐藏输入框的值同步到id="eName"的输入框里。之前试了这段jQuery代码但没用：

jQuery('input[name="doublethedonation_company_name_input"]').change(function() {};

原因是选完公司后，doublethedonation_company_name_input元素会从DOM中消失，导致事件监听失效。

可行实现方案 #

方案1：用MutationObserver监听DOM变化 #

监听父容器的DOM结构或属性变化，当隐藏字段的值更新或DOM切换时，自动同步值到目标输入框：

// 获取目标父容器
const targetContainer = document.getElementById('dd-company-name-input');

// 配置观察规则：监听子元素变化、属性变化，只关注value属性
const observerConfig = {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['value']
};

// 变化触发的回调函数
const observerCallback = function(mutationsList) {
  mutationsList.forEach(mutation => {
    // 要么是隐藏字段的value变了，要么是DOM结构更新了
    if ((mutation.type === 'attributes' && mutation.attributeName === 'value' && mutation.target.name === 'doubledonation_company_name') 
        || mutation.type === 'childList') {
      const companyName = document.querySelector('input[name="doubledonation_company_name"]')?.value;
      if (companyName) {
        document.getElementById('eName').value = companyName;
      }
    }
  });
};

// 创建并启动观察器
const observer = new MutationObserver(observerCallback);
observer.observe(targetContainer, observerConfig);

方案2：监听隐藏字段变化+反向操作处理 #

除了监听隐藏字段的value变化，还要处理“选择不同公司”的点击事件，清空目标输入框：

// 封装同步逻辑
const syncCompanyName = () => {
  const companyName = $('input[name="doubledonation_company_name"]').val();
  $('#eName').val(companyName || '');
};

// 页面加载时先同步一次
syncCompanyName();

// 点击"选择不同公司"时清空目标输入框
$(document).on('click', '.wrongcompany a', () => {
  $('#eName').val('');
});

// 监听隐藏字段的value变化
const hiddenField = $('input[name="doubledonation_company_name"]')[0];
if (hiddenField) {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
        syncCompanyName();
      }
    });
  });
  observer.observe(hiddenField, { attributes: true });
}

方案3：定时轮询检查（简单兜底方案） #

如果前两种方案不生效，可以用定时检查的方式，虽然性能略差但兼容性好：

let lastCompanyName = '';
// 每500毫秒检查一次，可根据需求调整间隔
setInterval(() => {
  const currentCompanyName = $('input[name="doubledonation_company_name"]').val();
  if (currentCompanyName !== lastCompanyName) {
    $('#eName').val(currentCompanyName || '');
    lastCompanyName = currentCompanyName;
  }
}, 500);

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