There is a drop down list:

<select id = "idNotes"></select>

After the page loads, it is necessary to set a certain number of options, corresponding to the number of records in the WebSQl table. There is a page loading event, after it we get the number of records from the database:

  db = openDatabase("Phones", "0.1", "A list of phones", 100); if(!db){ alert("Failed to connect to database."); } else{alert("Success to connect to database.");} var countNotes = 0; db.transaction(function (tx) { tx.executeSql("SELECT * FROM PHONES", [], function (tx, result) { countNotes = result.rows.length; }, null); });

How to put it into one function, loading after loading the document and setting the option?

    1 answer 1

     function makeOptions() { db = openDatabase('Phones', '0.1', 'A list of phones', 100); if(!db) return void alert('Failed to connect to database.'); else alert('Success to connect to database.'); db.transaction(function(tx) { tx.executeSql('SELECT * FROM PHONES', [], function(tx, result) { var optinons = ''; for(var i = 0; i < result.rows.length; i++) optinons += '<option>' + result.rows[i] + '</option>'; document.getElementById('idNotes').innerHTML = optinons; }, null); }); } document.addEventListener('DOMContentLoaded', makeOptions);