Nrthugu

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