title: Dynamically populating a drop down list with functions
body: <p>I am working on a chess puzzle app in javascript. I want to make a feature so a user can select a puzzle from a drop down menu. Using a library called Chess JS, a chess position is loaded using this function:</p>
  
  <pre><code>game = new Chess("FEN string");
  </code></pre>
  
  <p>I have an array of FEN strings like this: </p>
  
  <pre><code>var puzzleArray =['6R1/5q1p/3Qp1pk/p3Pp2/Ppr2P2/2P4P/6PK/8 w - - 0 1','rnbqkbnr/ppp1p1pp/8/3p1p2/4P3/2P5/PP1P1PPP/RNBQKBNR w KQkq - 0 3'];
  </code></pre>
  
  <p>I am generating a drop down menu like this: </p>
  
  <pre><code>&lt;html&gt;
  
       &lt;select id="selectPuzzle"&gt;
  
        &lt;/select&gt;
  
  &lt;/html&gt;
  &lt;script&gt;
      var select = document.getElementById("selectPuzzle"); 
      var options = ["Kasparov-Mamedyarov", "Beliavsky-Timman"];
  
      for(var i = 0; i &lt; options.length; i++) {
          var opt = options[i];
          var el = document.createElement("option");
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }​
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to make it so that when an option is selected, a function is run to load a new game from the puzzleArray, so when you select "Kasparov-Mamedyarov" from the drop down, the following code will be run:</p>
  
  <pre><code>game = new Chess("puzzleArray[0]");
  </code></pre>
  
  <p>Any help would be great cheers! </p>