-1

以下 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>
4

4 回答 4

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>
于 2012-04-09T10:11:15.030 回答
0

您可以尝试这样的变体：

首先，像这样为您的选项设置值并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>

其次，创建一个函数，该函数使用src从选定选项值中获取的值创建一个 iFrame，并将其附加到某处（如 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);
}

​看这里的例子

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

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

此处举例 ​</p>

于 2012-04-09T09:14:44.737 回答
0 
            <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>
于 2012-04-09T09:58:39.793 回答
0

您可以在页面中添加一个空框架并直接更改其 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>
于 2012-04-09T10:09:01.460 回答