title: Select2 - Load data dynamically
body: <p>I'm using the <strong>select2</strong> plugin. I'm trying to make the e3 "load" data from array regions based on the second select box. This is my code:</p>
  
  <pre><code>var regions = [{"first":["City1", "City2"],"second":["City3", "City4"]}];
  $('#e2').select2().on('change', function() {
      $.each(regions[($("#e2").val())], function(key,value) {
          $("#e3").append("&lt;option value='"+value+"'&gt;"+value+"&lt;/option&gt;");
      });
  }).trigger('change');
  </code></pre>
  
  <p>EDIT: The error I get, every time I change the <code>#e2</code>'s value is: <code>Uncaught TypeError: Cannot read property 'length' of undefined</code> </p>
  
  <p><br />
  What am I doing wrong?</p>
  
  <p>Thanks! :)</p>
  
  <p>EDIT2: </p>
  
  <pre><code>$('#e2').select2().on('change', function() {
      $.each(region[$("#e2").select2("val")], function(key,value) {
          alert(region[$("#e2").select2("val")]);
          $("#e3").append("&lt;option value='"+value+"'&gt;"+value+"&lt;/option&gt;");
      });
  }).trigger('change');
  </code></pre>
  
  <p>This was suggested... It still gives the previous error (Uncaught TypeError). The alert however returns: undefined</p>