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

Question

I have a base document that loads like http://localhost/index.php?action=test . 我有一个加载的基本文档，例如http：//localhost/index.php？action = test 。 This document has a button that opens a div with an iframe which loads another document from the same domain http://localhost/index.php?action=search . 该文档具有一个按钮，该按钮可打开一个具有iframe的div，该iframe可从同一域http：//localhost/index.php？action = search加载另一个文档。 Now I have the results and on click of a link in the iframe, I need to access a field (which is a select2 control) in the parent and set the value. 现在，我得到了结果，并单击iframe中的链接，我需要访问父项中的字段（这是select2控件）并设置值。

The generated html looks like this: 生成的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>

Below is the jquery code that I've been trying. 下面是我一直在尝试的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);
});

I'm getting the values from php, only my jquery does not work. 我从php获取值，只有我的jquery不起作用。 I have tried window.parent , window.parent.document , window.top.document (as you can see from the code above) but none of those seem to work. 我已经尝试了window.parent ， window.parent.document ， window.top.document （从上面的代码中可以看到），但是这些似乎都不起作用。 Any property that I access outside the iframe results as undefined (the alert in the above code). 我在iframe之外访问的任何属性的结果都是未定义的（上述代码中的警报）。

UPDATE: 更新：

After playing around, I get the value with window.parent.document but I still could not get the value into the select2 control. window.parent.document之后，我通过window.parent.document获得了值，但是仍然无法将其获得到select2控件中。 My current code looks like below: 我当前的代码如下所示：

$('.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();
});

I have checked the parent target element (unique class name in my case) is correctly populated in the variable and the value exists in the data variable (as JSON object). 我检查了父目标元素（在我的情况下为唯一的类名）是否已正确填充到变量中，并且值存在于数据变量中（作为JSON对象）。

UPDATE 2: 更新2：

I have replaced the unique class with the id of the parent element (since select2 was replicating the class from the parent into the select2 control) so I get a real unique id for the parent. 我已经用父元素的ID替换了唯一类（因为select2将类从父元素复制到select2控件中），所以我得到了父元素的唯一ID。 However, the result is the same. 但是，结果是相同的。 I still don't get to populate the results in the control. 我仍然无法在控件中填充结果。 My updated target is as below and I get my target id is correctly populated: 我更新的目标如下，我得到的目标ID已正确填充：

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

I've searched, read and tried all solutions that came up in SO and in internet but none worked. 我已经搜索，阅读并尝试了SO和Internet中出现的所有解决方案，但没有一个起作用。 Can anyone help? 有人可以帮忙吗？

Answer 1

I upgraded to v4 and the below code 'kinda' works for pushing the values (but the select2 control is duplicated with the option. possibly a bug in v4). 我升级到v4，以下代码“ kinda”可用于推送值（但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 个解决方案

解决方案1
0 2015-07-09 04:25:22

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

问题描述

1 个解决方案

解决方案1 0 2015-07-09 04:25:22

解决方案1
0 2015-07-09 04:25:22