웹에서 선택 상자에 값을 가져 오는 방법

Question

누구든지 웹 sql에서 선택 상자를 채울 수 있습니까? 오프라인 모바일 앱을 만들고 있습니다. 그래서 저는 카테고리와 레벨을위한 두 개의 선택 상자를 가지고 있습니다. 사용자가 카테고리를 선택하면 해당 레벨이 선택 상자에 나타나야합니다. 내가 웹 SQL에 처음 왔기 때문에 첫 번째 드롭 다운 상자에서 선택한 카테고리를 기반으로 웹 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

여기 데이터베이스에 설정된 국가 테이블은 크롬에서 동작하는 예제입니다있는 가정.

<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>