Создание динамического выпадающего списка из таблицы базы данных локального хранилища

Question

У меня есть некоторые данные в таблице sqlite с именем tblactivity, и я хочу иметь выпадающее меню / список для этих данных. Я пробовал следующие реализации, но, похоже, ничего не работает.

// Реализация 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>

Другая проблема заключается в том, какое событие использовать для вызова любой из вышеперечисленных реализаций в select, т.е. onload, onclick и т. Д.