423,335 Members | 1,076 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,335 IT Pros & Developers. It's quick & easy.

How to create Dropdown menu list from sqlite database table

P: 2
Am trying to get data from an sqlite database table to feed to my dropdown menu list. See my thinking below. The problem is I don’t know how to marry the JS function with the HTML part.


HTML.html
Expand|Select|Wrap|Line Numbers
  1.  
  2.         <label for="name"><b>Activity Name:/b></label>          
  3.         <select name="activity" id="activity" required>
  4.                         <option value="">--Select--</option>
  5.                         getActivity()
  6.                          </select>

JS.js


Expand|Select|Wrap|Line Numbers
  1.         function getActivity(tx) {
  2.                 tx.executeSql('SELECT * FROM tblactivity', [], queryActivity, errorHandler);
  3.                     function queryActivity(tx, results) {
  4.                 var len = results.rows.length;
  5.                 for (var i = 0; i < len; i++) {
  6.                    var SelectActivity +='<option value="' + results.rows.item(i).activityID +'">'+ results.rows.item(i).ActivityName +'</Option>';
  7.                 }
  8.                 //SelectActivity +="</Option";
  9.                 document.getElementById("activity").innerHTML =SelectActivity;
  10.             }}


Alternatively on HTML.html, incorporating the Function like

Expand|Select|Wrap|Line Numbers
  1.  
  2.         <label for="name"><b>Activity Name:/b></label>          
  3.         <select name="activity" id="activity" required>
  4.         <script>
  5.             function getActivity(tx) {
  6.                 tx.executeSql('SELECT * FROM tblactivity', [], queryActivity, errorHandler);
  7.                     function queryActivity(tx, results) {
  8.                 var len = results.rows.length;
  9.                 for (var i = 0; i < len; i++) {
  10.                    var SelectActivity +='<option value="' + results.rows.item(i).activityID +'">'+ results.rows.item(i).ActivityName +'</Option>';
  11.                 }
  12.                 //SelectActivity +="</Option";
  13.                 document.getElementById("activity").innerHTML =SelectActivity;
  14.             }}
  15.         </script>
  16.         </select>
Apr 7 '18 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,175
basicly you may use both variants - but you would need to call your function - given it does what you want it to do - in the onload-event of your page. by using this event you make sure the DOM is already processed and you can safly use getElementById to get a reference to your select-element.
Apr 11 '18 #2

Post your reply

Sign in to post your reply or Sign up for a free account.