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

Question

谁能帮我从 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:

    <select id='category' required>
        <option value='' disabled selected>Select your category</option>
        <option id='c1'>Category 1</option>
        <option id='c2'>Category 2</option>
        <option id='c3'>Category 3</option>
        <option id='c4'>Category 4</option>
        <option id='c5'>Category 5</option>
        <option id='c6'>Category 6</option>
    </select>

   <select id="level">
   <option value="">Select your level</option>
   </select>

Answer 1

假设您在数据库中设置了国家/地区表，这里是 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>