title: Populating select list from AJAX JSON result data
body: <p>Hello stackoverflow developer,
  First of all, sorry if I couldn't find a solution, but I've been trying for a while now.
  I'm not sure if my approach is the best one, so, if there's an alternative to AJAX and/JSON, please feel free to suggest it.</p>
  
  <p>I'm creating a tourist guide website where registered users will include their resorts, restaurants and tourist attractions according to region and state. I'm using Joomla! and Seblod for this (with some custom PHP, MySQL, Javascript and AJAX). Since I don't want to manually create 27 dynamic selects, I've been trying selecting the list of registered beaches (to which resorts and tourist attractions must be related to) with PHP/AJAX/JSON/JQuery.</p>
  
  <p>Everything works except populating the beach list, and I don't know what the problem is. I've tried multiple ways to append, create or add the options but nothing happens. 
  The PHP/JSON result is :</p>
  
  <pre>
  `
      [{"id":"17","title":"Porto+de+Galinhas"},{"id":"18","title":"Serrambi"},{"id":"19","title":"Tamandar%E9"}]
  
  `
  </pre>
  
  <p>It's the result of this PHP script:</p>
  
  <pre>
  `
  
      if($_GET['q'] == 'beaches'){
          $praiaSQL = sprintf("SELECT * FROM vp_content AS c LEFT JOIN vp_cck_store_item_content AS v ON c.id = v.id WHERE c.catid = 10 AND v.cck = 'praia' AND v.venue_state = '%s' ORDER BY c.title ASC;", $_GET['s']);
          $query = mysqli_query($connection, $praiaSQL);
          $praia = array();
          while($results = mysqli_fetch_assoc($query)){
              array_push($praia, array('id' => $results['id'], 'title' => urlencode($results['title'])));
          }
          echo json_encode($praia);
      }
  
  `
  </pre>
  
  <p>I also need a solution to handle accented characters. I'm trying urlencode here and decode in the JQuery, but may be the problem. When I left it as the original data, when there were accented characters the result item was empty.</p>
  
  <p>This is the relevant JQuery that handles the result (where x = the select and u = the URL to get the AJAX JSON result - I've commented where the problem is in the code):</p>
  
  <pre>
  `
  
      function setBeachList(x,u){
              var theDiv = "#cck1r_" + x;
              var theSelect = "#" + x;
              $j(theSelect).children("option:not(:first)").remove();
  
              $j.ajax({
                  url: u,
                  contentType: "application/json;charset=UTF-8",
                  success: function(data){
                      if(data.length){
                           /****
                             This is where I'm stuck, as I can't find a way to make sure the 
                             data is actually being treated/handled.
                             I've tried alerts and all sorts of other options to populate the
                             select.
                             I know it's being called because the before: and after: functions 
                             are working.
                           *****/
                          /*
                          $j.each(data, function(k, v){
                              var o = new Option();
                              var newTitle = urldecode(v.title);
                              $j(o).html(newTitle).val(v.id);
                              $j(theSelect).append(o);
                          });
                          */
                          var htm = '';
                          for (var i = 0; i '+urldecode(data[i].title)+'';
                          }
  
                          $j(theSelect).html(htm);
                      }
                  },
                  beforeSend: function(){
                      $j(theDiv).hide();
                  },
                  complete: function(){
                    $j(theDiv).show();  
                  },
                  dataType: 'json',
              });
          }
  
  `
  </pre>
  
  <p>Thank you for the time and patience, I'm not an expert at any of this (not exactly a newbie, but close...).</p>