Pfthb

I have some data on an sqlite table named tblactivity, and i want to have a drop down menu/list for this data. I have tried the following implementations, but nothing seems to work.

//Implementation A

 window.onload = function() 
 db.transaction(function(tx) 
 Squery = 'SELECT * FROM tblactivity';
 tx.executeSql(Squery,
 null,
 function(tx, results)
 
 //var select = document.getElementById('activity');
 var len = results.rows.length;
 for(var i=0; i<len; i++) 
 row = results.rows.item(i);
 var ID = row['activityID'];
 var Name = row['ActivityName'];
 /*var opt = document.createElement('option');
 opt.value = ID;
 opt.innerHTML = Name;
 select.appendChild(opt);*/
 //Create the new dropdown menu
 var whereToPut = document.getElementById('activity');
 var newDropdown = document.createElement('select');
 newDropdown.setAttribute('id',"newDropdownMenu");
 whereToPut.appendChild(newDropdown);

 //Add an option called "Apple"
 var optionApple=document.createElement("option");
 optionApple.text=Name;
 newDropdown.add(optionApple,newDropdown.options[null]);
 
 );
 );
 ; 

//Implementation B

 $(document).ready(function() 
 function getActivity() 
 tx.executeSql('SELECT * FROM tblactivity');
 function queryActivityb(tx, results) 
 var len = results.rows.length;
 for (var i = 0; i < len; i++) 
 var select = document.getElementById('activity');
 row = results.rows.item(i);
 var ID = row['activityID'];
 var Name = row['ActivityName'];
 var opt = document.createElement('option');
 opt.value = ID;
 opt.innerHTML = Name;
 select.appendChild(opt);
 ;
 
 
 ); 

//Implementation C

 window.onload = function() 
 function getActivity(tx) 
 var select = document.getElementById('activity');
 for (var i = 0; i <= 10; i++) 
 var opt = document.createElement('option');
 opt.value = i;
 opt.innerHTML = i;
 select.appendChild(opt);
 
 
 

//Implementation D

 function getActivity(){
 function getActivity(tx) 
 tx.executeSql('SELECT * FROM tblactivity', , queryActivity, errorHandler);
 function queryActivity(tx, results) 
 var len = results.rows.length;
 for (var i = 0; i < len; i++) 
 var select = document.getElementById('activity');
 select ='<option value="' + results.rows.item(i).activityID +'">'+ results.rows.item(i).ActivityName +'</Option>';
 //alert("activity");
 
 
 

The HTML page as follows

 <label for="activity"><b>Activity Name: <span style="color:#F00; font-size:10px;">*</span></b></label>
 <select name="activity" id="activity" required>
 <option value="">--Select--</option>

 </select>

Another problem is what event to use to call any of the above implementations in the select i.e onload, onclick etc