从本地存储数据库表创建动态下拉列表

Question

我在名为tblactivity的sqlite表上有一些数据，并且我想为该数据提供一个下拉菜单/列表。我尝试了以下实现，但是似乎没有任何效果。

//实施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]);
                    }
                });
            });
        };  

//实施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);
                    };
                }
            }
        }); 

//实施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);
           }
         }
         }

//实施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");
                        }
                    }
                }

HTML页面如下

    <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>

另一个问题是在选择（即onload，onclick等）中使用什么事件来调用上述任何实现？