This is a continuation of the example from the previous post in which we append options to a select menu then populate a text area based on changes in the selected option.
Suppose your page contains the following select menu and text area:
<label for="selectFirst">Select the first name:</label> <select name="selectFirst" id="selectFirst"> </select> <p>The last name will automatically populate the text area below when you select a first name above:</p> <textarea name="textareaLast" id="textareaLast"></textarea>
Open the database and select all records from the names table:
$(document).ready(function(){ mydb = window.openDatabase("names_db", "0.1", "A Database of Names", 1024 * 1024); loadData(); $('#selectFirst').change(function () { var $this = $(this); var listVal = $this.val(); $('#textareaLast').val(listVal); }); }); function loadData() { if(mydb) { mydb.transaction(function(t) { t.executeSql("SELECT * FROM names", [], updateSelectListsView); }); } }
In the excerpt above, the following code updates the text area whenever the selected option changes:
$('#selectFirst').change(function () { var $this = $(this); var listVal = $this.val(); $('#textareaLast').val(listVal); });
Append the options to the select menu:
function updateSelectListsView(tx, result) { var options = ""; var rows = result.rows; for(var x=0; x< rows.length; x++){ var id = result.rows[x].id; var fname = result.rows[x].first; var lname = result.rows[x].last; options += '<option value ="' + lname + '">'+ fname +'</option>'; } $('#selectFirst').append(options); }