无法使用jQuery填充选择下拉列表

Question

I am using websql to store some data for a web app. Now I am trying to retrieve it and populate it into a select dropdown box. I used the html function to set the values. But for some reason, the select dropdown box does not get populated.

HTML file

HTML File

Here is the Javascript file

var dbConnection=null;
var dbName='ExpensesAppDb';
var dbVersion='1.0';
var dbDisplayName='Expenses Application Database';
var dbSize=1024*1024*5;
var categoryTable="categories";
var name="name";
var _id="id";
var categoryTableQuery="create table "+categoryTable+"("+_id+" integer primary key,"
+ name +" text)";
var options="";

$(function()
{
dbConnection=openDatabase(dbName,dbVersion,dbDisplayName,dbSize);
createCategoryTable();
init();
fetchCategories();
});

createCategoryTable=function()
{
dbConnection.transaction(function(tx){
 tx.executeSql(categoryTableQuery,[],
 function(){alert('Category Table created');},
 function(tx,error){ alert(error.message);});
});
};

insertCategory=function(aName)
{
dbConnection.transaction(function(tx){
    tx.executeSql("insert into "+categoryTable+"("+name
    +") values(?)",[aName],
    function(tx,result)
    {

    },
    function()
    {

    }
)
    });
        };


fetchCategories=function()
{
dbConnection.transaction(function(tx){
    tx.executeSql("SELECT "+_id+","+name +" FROM "+categoryTable, [],
    function(SQLTransaction, data){
    for (var i = 0; i "+aName+""
}

function populateCategoryList()
{
 $('#expensesCategory').html(options);
 $("#expensesName").val("Hello");
}

function init()
{
    insertCategory("Food");
    insertCategory("Rent");
    insertCategory("Gas");
    insertCategory("Entertainment");
}

PS: How does one show the source of the HTML File over here. I guess the engine was parsing the html file.

Answer 1

I figured it out. I had to refresh the display state of the selection box by using $("#expensesCategory").selectmenu('refresh', true);