title: jquery to get database query based on user click and populate select list
body: <p>I am working on a form where a user can select a letter from A - Z to select a list of users whose username begins with that letter.</p>
  
  <p>What i am trying to do is when the user clicks a letter, a php script is called to do a database query that pulls any username which begins with the clicked letter.</p>
  
  <p>I have found this page which has started me off <a href="http://openenergymonitor.org/emon/node/107" rel="nofollow noreferrer">http://openenergymonitor.org/emon/node/107</a> and also this one which is closer to what i want to do <a href="https://stackoverflow.com/questions/8019489/simple-ajax-jquery-script-how-can-i-get-information-for-each-of-the-rows-in-the">Simple Ajax Jquery script- How can I get information for each of the rows in the table?</a></p>
  
  <p>What i want to do with the returned results is put them in a SELECT list and also when a user click a different letter, that list contents is replaced with the new query results.</p>
  
  <p>What i'm not sure is how to and if possible pass the letter to the php script so i can search the database for usernames that begin with that letter.</p>
  
  <p>EDIT:  I have got it hopefully improved to this but i'm getting Ajax error: ParseError</p>
  
  <p>this is my code so far</p>
  
  <pre><code>&lt;div&gt;
          &lt;ul&gt;
              &lt;li class="alphabets" id="All"&gt;All&lt;/li&gt;
              &lt;li class="alphabets" id="A"&gt;A&lt;/li&gt;
              &lt;li class="alphabets" id="B"&gt;B&lt;/li&gt;
              &lt;li class="alphabets" id="C"&gt;C&lt;/li&gt;
              &lt;li class="alphabets" id="D"&gt;D&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="recipients"&gt;
      $(document).ready(function(){
                  $("li.alphabets").click(function(){
                      var the_letter = $(this).text();
                      alert(the_letter);
  
                      $.ajax({                                      
                          url: 'php/selectuser.php', type: 'GET', data: {'letter':the_letter}, dataType: 'json',  success: function(rows) {
                              var options = '';
                              for (var i in rows) {
                                  var row = rows[i];          
                                  var id = row[0];
                                  var vname = row[1];
  
                                  options += '&lt;option value="' + id + '"&gt;' + vname + '&lt;/option&gt;';
                              } 
                              $("#userlist").html(options);
                          } 
                      });
                  });
              });
      &lt;select id="userslist" name="recipients" size="5"&gt;
  
  
  
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>