2014-10-07 76 views
0

任何人都可以幫助我從web sql中填充選擇框。我正在創建一個離線移動應用程序。所以我有兩個選擇框用於類別和其他級別。當用戶選擇相應級別必須出現在選擇框中的類別時。由於我是web新手,我需要一些幫助才能根據第一個下拉框中選擇的類別從web 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> 
+0

我認爲這個問題是用選擇查詢 – jasna 2014-10-07 06:17:47

+0

tx.executeSql的語法( 'SELECT levell FROM水平WHERE類別=?',[類別],功能(TX,結果){當我取代選擇查詢hello is alerts。但是我需要得到levell的值= category''' – jasna 2014-10-07 06:29:16

+0

hurray我發現了tx.executeSql('SELECT levell FROM level WHERE category =?',[cat],function(tx,results){ – jasna 2014-10-07 07:16:45

回答

2

假設你已經在你的數據庫在這裏設置一個國家表是在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> 
相關問題