title: Select HTML5 JSON AJAX JAVASCRIPT
body: <p>I want to make an html5 select with data given by javascript, and inside this javascript an ajax calling a Json URL. I mean, I´ve got this:</p>
  
  <p>--index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
    &lt;script src="functions_app.js"&gt;&lt;/script&gt; 
      &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="getData()"&gt;
  
  &lt;p&gt;Sessions: 
  &lt;select id="Select"&gt;&lt;/select&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>functions_apps.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getData(){
  
       $.ajax({
        type: "GET",
        url: 'http://.../json_offers.php', 
  
        async: false,
        dataType: "json",
        success: function(data){
         //alert(data);
         $.each(data,function(key, registro) {
          var id = "";
             var name = "";
             
        $.each(registro, function(key, value) {
         //alert(campo + ": " + valor);
         if (key == "id") { id = value; }
         if (key == "name") { name = value; }
                
        });
                   }); 
     $("#select").append('&lt;option value='+id+'&gt;'+nombre+'&lt;/option&gt;');   
        },
        error: function(data) {
         alert('error');
        }
       });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>json_offers.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Json data:
  [{"id":"6","name":"FLOWERS"},{"id":"8","name":"GROCERY"}]</code></pre>
  </div>
  </div>
  </p>
  
  <p>But It does not work. It always return:</p>
  
  <p><strong>error: function(data)</strong> </p>
  
  <p>I can´t load data given inside html select.</p>
  
  <p>Any Help?</p>
  
  <p>Best Regards </p>