title: dynamically change script src client-side
body: <p>I have an HTML page which contains:</p>
  
  <ul>
  <li>a <code>&lt;select&gt;</code> dropdown with 3 options with an onchange event to a JS function</li>
  <li>a DIV holder with a script element inside:</li>
  </ul>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;select onChange="getData(this.value);"&gt;
      &lt;option value="-"&gt;Limba/Language&lt;/option&gt;
      &lt;option value="ro"&gt;Romana&lt;/option&gt;
      &lt;option value="en"&gt;Engleza&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="output"&gt;
      &lt;script id="widget" type="text/javascript" src="js1.js"&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the JS function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I select option 2 or 3 I get this output in my browser: <code>[object HTMLScriptElement]</code></p>
  
  <p>What I want to do is switch the src property of the script tag based on the value selected in the dropdown element. 
  I want to do this client-side and preferably without any external libraries...</p>