如何通过弹窗修改父页面对应按钮的邻近输入框内容？

这个需求的核心是建立弹窗与触发它的按钮之间的关联，这样弹窗才能精准定位到要修改的输入框。下面给你两种实用的实现方案，结合jQuery和原生JS就能搞定：

方案一：用全局变量记录当前触发按钮（简单直接） #

1. 调整主页面的动态生成代码 #

给每组元素加一个统一的父容器，同时给按钮绑定唯一的data-index（动态生成时赋值递增的索引），并把点击事件改成调用自定义函数：

<!-- 动态生成的每组内容，注意外层的.poi-group容器和按钮的data-index -->
<div class="poi-group">
  <input type='text' name='pois[]' class="poi-input" /> 
  <a onclick="openPoiPopup(this)" class='btn btn-default' data-index="0">Edit</a>
</div>

2. 主页面添加JS逻辑 #

定义全局变量临时存储当前点击的按钮，打开弹窗时记录这个按钮的引用：

// 全局变量，临时保存触发弹窗的按钮
let activePoiButton = null;

function openPoiPopup(btnElement) {
  activePoiButton = btnElement;
  // 打开弹窗
  window.open('file.php', 'searchPoi', 'width=800, height=500');
}

3. 弹窗页面（file.php）的确认逻辑 #

当用户在弹窗里选好内容后，调用下面的函数修改父页面的对应输入框：

// 假设selectedValue是用户选择的内容，你可以根据自己的选择逻辑获取这个值
function updateParentInput(selectedValue) {
  // 检查父页面是否存在，以及是否有记录的按钮
  if (window.opener && window.opener.activePoiButton) {
    // 用jQuery的closest找到父容器，再定位到对应的输入框
    const targetInput = window.opener.$(window.opener.activePoiButton)
      .closest('.poi-group') // 找到当前按钮所在的分组容器
      .find('.poi-input');   // 定位分组里的输入框
    
    // 设置输入框的值
    targetInput.val(selectedValue);
    // 关闭弹窗
    window.close();
  }
}

方案二：通过URL参数传递索引（更安全，无全局变量） #

如果不想用全局变量，可以把按钮的唯一索引通过URL参数传给弹窗：

1. 主页面的点击函数修改 #

function openPoiPopup(btnElement) {
  // 获取按钮的data-index值
  const groupIndex = $(btnElement).data('index');
  // 把索引作为URL参数传给弹窗
  window.open(`file.php?groupIndex=${groupIndex}`, 'searchPoi', 'width=800, height=500');
}

2. 弹窗页面的确认逻辑 #

从URL里取出索引，再定位到父页面的对应输入框：

function updateParentInput(selectedValue) {
  if (window.opener) {
    // 解析URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const groupIndex = urlParams.get('groupIndex');
    
    // 父页面中找到对应索引的分组里的输入框
    const targetInput = window.opener.$(`.poi-group:has([data-index="${groupIndex}"]) .poi-input`);
    targetInput.val(selectedValue);
    window.close();
  }
}

注意事项 #

• 确保父页面和弹窗页面都引入了jQuery（如果用上面的jQuery语法）；
• window.open必须由用户主动点击触发，否则可能被浏览器的弹窗拦截器拦截；
• 动态生成的data-index值要保证唯一（比如从0开始递增，或者用后端生成的唯一ID）。

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