Question

我有一个像http://localhost/index.php?action=test一样加载的基础文档。此文档有一个按钮，用于打开带有iframe的div，该iframe会从同一个域http://localhost/index.php?action=search加载另一个文档。现在我有结果，点击iframe中的链接，我需要访问父级中的一个字段（这是一个select2控件）并设置值。

生成的html如下所示：

<tbody>
 <tr>
  <td class="fldlabel">
   <div><label for="header[CTRYID]">Country</label></div>
  </td>
  <td>
   <input tabindex="-1" id="header-CTRYID" data-label="Country" name="header[CTRYID]" class="ajaxselect srchtarget-CTRYID validate select2-offscreen" data-validate="required" value="" data-placeholder="Select Country" type="text">
   <span class="hdricon">
     <a href="CTRYID-search" data-source="index.php?action=search&amp;source=CTRYID" class="srchbutton"><img class="imgicon" src="/images/icons/search.ico" alt="Search Country"></a>
   </span>
   <div class="searchpanel" id="CTRYID-search" style="">
    <div class="frametitle">Search Country </div>
     <div class="srchbody">
       <iframe src="index.php?action=search&amp;source=CTRYID" class="srchframe">
        #document
        <!DOCTYPE html>
        <html>
        <head></head>
         <body>
          <div id="container">
           <div id="content" style="overflow: hidden;" tabindex="5000">
            <form method="post" action="index.php?action=search&source=CTRYID" name="country">
             <div id="searchselect" class="srchrslt">
              <div class="frametitle">Search Results</div>
               <table border="1" style="margin-top: 5px;">
                <tbody>
                 <tr class="gridrow searchrow" data-search="IN|India" data-target="CTRYID">
                   <td>IN</td>
                   <td>India</td>
                   <td>IND</td>
                 </tr>
                </tbody>
               </table>
             </div>
           </form>
         </div>
       </iframe>
     </div>
    </div>
   </div>
  </td>
 </tr>
</tbody>

以下是我一直在尝试的jquery代码。

$('.searchrow').click(function (e) {
    alert($('#srchtarget-CTRYID',window.parent.document).attr('id'));
    e.preventDefault();
    var srchdata = $(this).data('search').split("|");
    var srchval = JSON.stringify({"id":srchdata[0],"text":srchdata[0]+"|"+srchdata[1]});
    var target = "srchtarget-" + $(this).data('target');
    $(target,window.document).select2().select2('val',srchval);
    $(this).parent().find('.searchpanel').hide();
  //        $(this).parents().find(target).val(srchval);
});

我从php获取值，只有我的jquery不起作用。我尝试了window.parent，window.parent.document，window.top.document（正如您从上面的代码中看到的那样），但这些似乎都不起作用。我在iframe外部访问的任何属性都是未定义的（上面代码中的警告）。

更新

玩完之后，我得到window.parent.document的值，但我仍然无法将值传入select2控件。我目前的代码如下所示：

$('.searchrow').click(function (e) {
    var srchdata = $(this).data('search').split("|");
    var srchval = [];
    srchval.push({"id": srchdata[0], "text": srchdata[0] + "|" + srchdata[1]});
    var target = ".srchtarget-" + $(this).data('target');
    var parentctrl = window.parent.document;
    $(target,parentctrl).select2('data',srchval);
    $(this).closest('.searchpanel').hide();
    $('.searchpanel', parentctrl).hide();
});

我检查了父目标元素（在我的情况下是唯一的类名）是在变量中正确填充的，并且值存在于数据变量中（作为JSON对象）。

更新2：

我已经用父元素的id替换了唯一的类（因为select2正在将类从父级复制到select2控件中）所以我得到了父级的唯一id。但是，结果是一样的。我仍然无法在控件中填充结果。我的更新目标如下所示，我的目标ID已正确填充：

    var target = "#" + $(this).data('target');

我已经搜索过，阅读并尝试了SO和互联网上出现的所有解决方案，但都没有奏效。有人可以帮忙吗？

Answer 1

我已升级到v4和以下代码＆＃39;有点＆＃39;用于推送值（但select2控件与选项重复。可能是v4中的错误。）

$('.searchrow').click(function (e) {
  var srchdata = $(this).data('search').split("|");
  var target = ".srchtarget-" + $(this).data('target');
  var targetoption = target + " option[value='" + srchdata[0] + "']";
  var parentctrl = window.parent.document;
  $(targetoption,parentctrl).attr("selected","selected");
  $(target,parentctrl).select2();
});

从iframe访问父select2控制元素并设置其值

1 个答案: