7

以下を含むHTMLページがあります。

  • <select>JS関数へのonchangeイベントを含む3つのオプションを含むドロップダウン
  • 内部にスクリプト要素を持つDIVホルダー：

コードは次のとおりです。

<select onChange="getData(this.value);">
    <option value="-">Limba/Language</option>
    <option value="ro">Romana</option>
    <option value="en">Engleza</option>
</select>
<div id="output">
    <script id="widget" type="text/javascript" src="js1.js"></script>
</div>

そして、これがJS関数です。

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        default:
        void(0);
    }
}
</script>

オプション2または3を選択すると、ブラウザに次の出力が表示されます。[object HTMLScriptElement]

私がやりたいのは、ドロップダウン要素で選択された値に基づいて、スクリプトタグのsrcプロパティを切り替えることです。私はこれをクライアント側で、できれば外部ライブラリなしで実行したいと思います...

4

3 に答える 3

8

他の解決策は素晴らしいです:)...しかし、JavaScriptを介して要素を作成したい場合は、innerHTMLの代わりにappendChildを使用する必要があります...

JavaScriptは次のようになります:)

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        default:
        void(0);
    }
}
</script>
于 2012-12-06T16:54:07.750 に答える
2 
function getData(title){
    document.getElementById("widget").src= (title == "ro" || title == "-") ? "js1.js" : "js2.js";
}
于 2012-12-06T16:56:38.640 に答える
0

簡単に行う：

function getData(title) {
    switch(title) {
        case "ro":
            document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js1.js" />';
            break;
        case "en":
            document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js2.js" />';
            break;
        default:
            void(0);
    }
}
于 2012-12-06T16:49:36.617 に答える