Question

以下HTML代码按预期工作。我需要的是一个下拉选项，用户将选择任何平台，右框架将加载所需的文件。

<a href="android.html" target="dynamic"> android form </a>
<a href="J2ME.html" target="dynamic"> J2ME form </a>
<a href="windows.html" target="dynamic"> windows form </a>

以下html会生成下拉选项，但如何自动加载所需的页面？

<form>
Platform:
<select name='platform'>
<option>Android  </option>
<option> J2ME </option>
<option> Windows </option>

</select>
</form>

Answer 1

            <html>
            <head>
            <script type="text/javascript">
            function loadFrame()
            {
            var s=document.getElementById("platform").value;

            document.getElementById("loadContainer").innerHTML=""
            var iframe = document.createElement("iframe");
            iframe.src = s;
            document.getElementById("loadContainer").appendChild(iframe);
            }
            </script>
            </head>
            <body>

            <div style="float:left">
            <form>
                Platform:
                <select id='platform' onchange="loadFrame()">
                    <option value="android.html">Android</option>
                    <option value="J2ME.html">J2ME</option>
                    <option value="Windows.html">Windows</option>
                </select>
            </form>
            </div>

            <div id="loadContainer" style="float:right"></div>
            </body>
            </html>

Answer 2

您可以尝试这样的变体：

首先，为您的选项设置值，然后为select元素设置onchange事件：

<form>
Platform:
<select name='platform' onchange='loadFrame(this)' id='OSList'>
    <option value="1.html">Android</option>
    <option value="2.html">J2ME</option>
    <option value="3.html">Windows</option>
</select>
</form>
<div id="loadContainer"></div>

其次，创建一个函数，创建一个iFrame，其中src来自所选的选项值并将其附加到某处（比如div＃loadContainer）：

function loadFrame(comboBox)
{
    var frame = document.createElement("iframe");
    frame.src = comboBox.options[comboBox.selectedIndex].value;
    var container = document.getElementById("loadContainer");
    container.innerHTML = "";
    container.appendChild(frame);
}

查看示例here

如果你能够使用jQuery（或其他框架，你可以通过JS以这种方式绑定到select onchange事件）：

var el = $("#OSList");
el.change(function() {
    var frame = document.createElement("iframe");
    frame.src = el.val();
    $("#loadContainer").empty().append(frame)
});

示例here

Answer 3

            <html>
            <head>
            <script type="text/javascript">
            function loadFrame()
            {
            var select_value=document.getElementById("platform").value;

            window.location =select_value;
            }
            </script>
            </head>
            <body>

            <form>
                Platform:
                <select id='platform' onchange="loadFrame()">
                    <option value="andriod.html">Android</option>
                    <option value="j2me.html">J2ME</option>
                    <option value="windows.html">Windows</option>
                </select>
            </form>

            </body>
            </html>

Answer 4

您可以在页面中添加一个空框架并直接更改其src，无需检索html内容，如下所示：

<html>
        <head>
        <script type="text/javascript">
        function loadFrame(comboBox)
         {
        var frame = window.frames['platformFrame'],
            src = comboBox.options[comboBox.selectedIndex].value;
            frame.window.location.href = src; //use window.location to avoid browser capability.
        }
        </script>
        </head>
        <body>

        <form>
            Platform:
            <select id='platform' onchange="loadFrame()">
                <option value="andriod.html">Android</option>
                <option value="j2me.html">J2ME</option>
                <option value="windows.html">Windows</option>
            </select>
        </form>
        <iframe src="" id="platformFrame"></iframe>
        </body>
        </html>

选择加载框架

4 个答案: