-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

あなたはそのような変種を試すことができます：

まず、次のようにオプションの値を設定し、onchangeselect要素のイベントを設定します。

<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);
}

こちらの例をご覧ください

onchangejQuery（または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 に答える