Question

美好的一天。我有一个html页面page.html，它会加载一个名为iframe.html的iframe。我有Select2进入page.html，<select class='selectme'>进入iframe.html。

我正在使用此js来激活Select2 FROM page.html：

var jFrame = function (selector) { return $(selector, $("iframe").contents()); };
OurBigWrapper = {
    "setup":{
        "init":function(){
            console.log("wrapper,setup,init");
            var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

            jFrame(".countries").select2(
                {
                  data: data /*,
                  formatSelection : this.formatSelection.bind(this)*/
                }
            );  

        }
    }
}

在iframe.html页面上，代码如下：

<select class="countries">

    </select>
<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
            parent.OurBigWrapper.setup.init();
        }); 

    </script>

我获得的是Select正确获取数据，但是一旦点击，select只会“更改”右边的小箭头，表示“打开的选项面板”，但实际上没有选项显示。

有趣的是，如果我删除select2 css，这就是我获得的：

在这里，点击选择并选择另一个选项，就是我所看到的：

有人对发生了什么以及如何阻止它发生有任何线索？

Answer 1

            <script>
                $(function ($) {
                    $("button").on("click", function (evt) {
                var jFrame = function (selector) { return $(selector, $("iframe").contents()); };

                var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
                jFrame(".selectme").select2(
                    {
                        data: data
                    }
                );

                    });
                })
            </script>
        </head>
        <body>
            <iframe id="myframe" src="iframe.html"></iframe>
            <button type="button">click</button>
        </body>

和

    <body>
        <select class="selectme"></select> i
    </body>
</html>

jQuery Select2用于从parent.window到子iframe

1 个答案: