動態改變SCRIPT SRC客戶端

Question

我有一個包含一個HTML頁：

• 一個<select>下拉帶有3個選項與onchange事件到一個JS函數
• 與內部的腳本元件的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]

我想要做的就是切換基於選擇的值script標籤的src屬性下拉元素。 我想這樣做的客戶端，最好沒有任何外部庫...

Answer 1

另一種方案是偉大的:) ......但如果你仍然想創建通過JavaScript元素，你應該使用的appendChild而不是innerHTML的...

這裏是你的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> 

Answer 2

做簡單：

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

Answer 3

function getData(title){ 
    document.getElementById("widget").src= (title == "ro" || title == "-") ? "js1.js" : "js2.js"; 
}