如何将值从websql中获取到选择框中

how to get values into a select box from web sql

本文关键字：获取 选择 websql      更新时间：2023-09-26

有人能帮我从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>

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