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

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

javascript jquery html iframe

Javascript 从iframe访问父select2控制元素并设置其值,javascript,jquery,html,iframe,jquery-select2,Javascript,Jquery,Html,Iframe,Jquery Select2,我有一个基本文档，加载方式如下。此文档有一个按钮，用于打开带有iframe的div，iframe从同一域加载另一个文档。现在我有了结果，单击iframe中的链接，我需要访问父级中的字段（它是select2控件）并设置值生成的html如下所示： <tbody> <tr> <td class="fldlabel"> <div><label for="header[CTRYID]">Country</label>&l

我有一个基本文档，加载方式如下。此文档有一个按钮，用于打开带有iframe的div，iframe从同一域加载另一个文档。现在我有了结果，单击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>

我从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');

我搜索、阅读并尝试了所有在互联网上找到的解决方案，但都没有成功。有人能帮忙吗？

我升级到了v4，下面的代码“kinda”用于推送值（但是select2控件与选项重复。可能是v4中的错误）

您确实意识到，

标记中的任何内容只有在浏览器不支持Javascript（或关闭了Javascript）时才会显示，对吗？哈哈@Sverri，上面粘贴的代码来自Firebug源代码，而不是我的html页面。我在这里修补了主页代码和iframe代码，以显示完整的图片。

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

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