Javascript 如何从web sql将值获取到选择框中

有人能帮我从web sql填充选择框吗。我正在创建一个离线移动应用程序。所以我有两个选择框，一个用于类别，另一个用于级别。当用户选择类别时，相应级别必须出现在选择框中。由于我是web sql新手，我需要一些帮助来根据在第一个下拉框中选择的类别从web sql获取相应级别。提前感谢

    $(document).ready(function(){

$('#category').on('change',function(){

var cat = document.getElementById('category').value;


    alert(cat);


    db.transaction(function (tx) {
//alert("SELECT levell FROM level WHERE category="+cat);

tx.executeSql('SELECT levell FROM level WHERE category='+cat, [category], function (tx,results) { 


    alert("hello");


    for (var i=0; i < results.rows.length; i++){


     row = results.rows.item(i);
editRecords2(row.lev_id,row.levell);


     }


     });

        });
        });
        });


    function editRecords2(lev_id,levell) {
    f = $('#level');
    f.html("");
    f.html(f.html() + '<option value='+lev_id+'>'+levell+'</option>');
    }

html:

---

假设您在数据库中设置了一个国家/地区表，下面是Chrome上的一个工作示例

    <script type="text/javascript" src="../assets/js/jquery.min.js"> </script>
    <script type="text/javascript">
    var errCallback = function(){
        alert("Database Error!");
    }

    // initialise the db - this will fail in browsers like Firefox & IE
    var db = openDatabase("local_customers", "0.1", "myData", 65536);

    db.transaction(
    function(transaction) {     
    transaction.executeSql( 
    'CREATE TABLE IF NOT EXISTS customers (user_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, country_id TEXT);'
      );
    });

    // This is the SAVE function
    var saveCustomers = function(user_id, country_id, successCallback){
        db.transaction(function(transaction){
            transaction.executeSql(("INSERT INTO customers (user_id, country_id) VALUES (?, ?);"), 
            [user_id, country_id], function(transaction, results){successCallback(results);}, errCallback);
        });
    };      

    // Document ready event.
    $(function(){
        var form = $("form");

    db.transaction(function (tx) {
    tx.executeSql('select * from country', [], function (tx, results){
            var len = results.rows.length, i;
            var html = "<select name=\"country_id\">";
            for (i = 0; i < len; i++) {
                html += "<option value='" + results.rows.item(i).country_id + "'>" + results.rows.item(i).country + "</option>";
                }
                html += "</select>"; 
                var el = document.getElementById("country_id");
                el.innerHTML = html;                
        }); 
    });     

    // Override the default form submit in favour of our code
        form.submit(function(event){
            event.preventDefault();
            saveCustomers($('#user_id').val(), $('#country_id').val(), function(){
                alert($('#country_id').val() + " has been added.");
            })
        }); 
    }); 
    <!--HTML is here & just using a dummy input for user_id here-->
    <form>  
        <input type="text" id="user_id" name="user_id" class="user_id" value = "2" hidden />
        <p><select type="text" id="country_id" name="country_id" class="country_id" >Select Country</select></p>
        <p><input type="submit" value="Add Country" /></p>
    </form>

---

我认为问题在于select querytx.executeSql'select levell FROM level WHERE category=？'的语法，[category]，函数tx，结果{当我替换select查询时，hello被警告。但是我需要用category='cat'hurray获取level的值，我发现了tx.executeSql'select levell FROM level WHERE category=？'，[cat]，函数tx，结果{

    <script type="text/javascript" src="../assets/js/jquery.min.js"> </script>
    <script type="text/javascript">
    var errCallback = function(){
        alert("Database Error!");
    }

    // initialise the db - this will fail in browsers like Firefox & IE
    var db = openDatabase("local_customers", "0.1", "myData", 65536);

    db.transaction(
    function(transaction) {     
    transaction.executeSql( 
    'CREATE TABLE IF NOT EXISTS customers (user_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, country_id TEXT);'
      );
    });

    // This is the SAVE function
    var saveCustomers = function(user_id, country_id, successCallback){
        db.transaction(function(transaction){
            transaction.executeSql(("INSERT INTO customers (user_id, country_id) VALUES (?, ?);"), 
            [user_id, country_id], function(transaction, results){successCallback(results);}, errCallback);
        });
    };      

    // Document ready event.
    $(function(){
        var form = $("form");

    db.transaction(function (tx) {
    tx.executeSql('select * from country', [], function (tx, results){
            var len = results.rows.length, i;
            var html = "<select name=\"country_id\">";
            for (i = 0; i < len; i++) {
                html += "<option value='" + results.rows.item(i).country_id + "'>" + results.rows.item(i).country + "</option>";
                }
                html += "</select>"; 
                var el = document.getElementById("country_id");
                el.innerHTML = html;                
        }); 
    });     

    // Override the default form submit in favour of our code
        form.submit(function(event){
            event.preventDefault();
            saveCustomers($('#user_id').val(), $('#country_id').val(), function(){
                alert($('#country_id').val() + " has been added.");
            })
        }); 
    }); 
    <!--HTML is here & just using a dummy input for user_id here-->
    <form>  
        <input type="text" id="user_id" name="user_id" class="user_id" value = "2" hidden />
        <p><select type="text" id="country_id" name="country_id" class="country_id" >Select Country</select></p>
        <p><input type="submit" value="Add Country" /></p>
    </form>