title: preloaded data in html
body: <p>What would be the best way to have preloaded data in html and then used with javascript. I do not want to use variables in javascript or save an ajax query.</p>
  
  <p>It may be an XML data into a hidden div? .</p>
  
  <p>Example:</p>
  
  <pre><code>1; Europe
  2; Latin America
  
  ------------------
  
  2, 1, Argentina
  2, 2; Brazil
  2, 3, Chile
  1, 4, France
  1, 5, Spain
  1, 6; Italy
  </code></pre>
  
  <p>He would have to load the data into a select depending on the country you select. are much data and need to be fast, I prefer to have it preloaded.</p>
  
  <p><strong>EDIT. Solution, based on the proposed solutions:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  $(function(){
  
      $_save_data = $("&lt;div&gt;");
  
      $("#xselect optgroup").appendTo($_save_data);
  
      $("#buttonAddA").click(function(){
          $("#xselect").empty();
          $_save_data.find("optgroup[id='a'] option").clone().appendTo("#xselect");
      });
  
      $("#buttonAddB").click(function(){
          $("#xselect").empty();
          $_save_data.find("optgroup[id='b'] option").clone().appendTo("#xselect");
      });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id="buttonAddA"&gt;Add A&lt;/button&gt;
  &lt;button id="buttonAddB"&gt;Add B&lt;/button&gt;
  &lt;select id="xselect"&gt;
      &lt;optgroup id="a"&gt;
          &lt;option&gt;a1&lt;/option&gt;
          &lt;option&gt;a2&lt;/option&gt;
          &lt;option&gt;a3&lt;/option&gt;
          &lt;option&gt;a4&lt;/option&gt;
          &lt;option&gt;a5&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup id="b"&gt;
          &lt;option&gt;b1&lt;/option&gt;
          &lt;option&gt;b2&lt;/option&gt;
          &lt;option&gt;b3&lt;/option&gt;
          &lt;option&gt;b4&lt;/option&gt;
          &lt;option&gt;b5&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup id="c"&gt;
          &lt;option&gt;c1&lt;/option&gt;
          &lt;option&gt;c2&lt;/option&gt;
          &lt;option&gt;c3&lt;/option&gt;
          &lt;option&gt;c4&lt;/option&gt;
          &lt;option&gt;c5&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>