Javascript 在选择上加载框架_Javascript_Html

Javascript 在选择上加载框架

javascript html

Javascript 在选择上加载框架,javascript,html,Javascript,Html,以下HTML代码按预期工作。我需要的是一个下拉选项，用户将选择任何平台，righ框架将加载所需的文件 <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 <

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

<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>


站台：
安卓
J2ME
窗户

您可以尝试以下变体：

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

看看这个例子

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

onchange

事件）：

范例


函数loadFrame（）
{
var select_value=document.getElementById（“平台”）.value；
window.location=选择_值；
}
站台：
安卓
J2ME
窗户

您可以在页面中添加一个空框架并直接更改其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>


函数loadFrame（组合框）
{
var frame=window.frames['platformFrame']，
src=comboBox.options[comboBox.selectedIndex].value；
frame.window.location.href=src；//使用window.location可避免浏览器功能。
}
站台：
安卓
J2ME
窗户


函数loadFrame（）
{
var s=document.getElementById（“平台”）.value；
document.getElementById（“loadContainer”）.innerHTML=“”
var iframe=document.createElement（“iframe”）；
iframe.src=s；
document.getElementById（“loadContainer”）.appendChild（iframe）；
}
站台：
安卓
J2ME
窗户

我建议使用比HTML中定义的更好的绑定方案，比如jQuery。

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

            <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>

<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>

            <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>