Web SQL – Append Options to a Select Menu

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);    
}