Question

当单击搜索按钮时，应该出现一个表，其中包含包含所选列表项的名称的所有记录，但由于某种原因它不起作用，因为该表根本不显示。有谁知道如何解决这个问题？

HTML

<!DOCTYPE html>
<html>

<head>
    <title>World</title>

    <meta name="viewport" content="width=default-width; user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body onload="init()">
    <div data-role="page" id="myform">
        <div data-role="header">
            <h1>World</h1>
        </div>

        <div data-role="content">
            <form>
                <table cellpadding="2" cellspacing="2">
                    <tr>
                        <td>Continent</td>
                        <td>
                            <select id="continent" required>
                                <option value="Africa">Africa</option>
                                <option value="Antarctica">Antarctica</option>
                                <option value="Asia">Asia</option>
                                <option value="Europe">Europe</option>
                                <option value="North America">North America</option>
                                <option value="Oceania">Oceania</option>
                                <option value="South America">South America</option>
                            </select>
                        </td>
                    <td>
                        <input type="button" value="Search" class="btn-form" data-icon="search" onclick="search()">
                        </td>
                    </tr>
                </table>
            </form>

            <div id="result"></div>
    </div>
</body>

</html>

的JavaScript

var db = openDatabase('helloworld', '1.0', 'World', 5 * 1024 * 1024);

function init() {
    "use strict";

    db.transaction(function (tx) {
        tx.executeSql('DROP TABLE continents');
        tx.executeSql('CREATE TABLE IF NOT EXISTS continents(id INTEGER PRIMARY KEY AUTOINCREMENT, continent TEXT)');


        //Record 1
        tx.executeSql('INSERT INTO continents(continent) values("Africa")');
        tx.executeSql('INSERT INTO continents(continent) values("Antarctica")');
        tx.executeSql('INSERT INTO continents(continent) values("Asia")');
        tx.executeSql('INSERT INTO continents(continent) values("North America")');
        tx.executeSql('INSERT INTO continents(continent) values("Oceania")');
        tx.executeSql('INSERT INTO continents(continent) values("South America")');        
    });
}

function search(id) {
    "use strict";

    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM continents WHERE continent = ?', [continent], function (tx, results) {
            var n = results.rows.length;
            var s = '<h2>Results</h2>';
            s += '<table cellpadding="3" cellspacing="3" border="1">'; 
            s += '<tr><th>ID</th><th>Continent</th></tr>';
            for (var i = 0; i < n; i++) {
                var work = results.rows.item(i);
                s += '<tr>';
                s += '<td>' + work.id + '</td>';
                s += '<td>' + work.continent + '</td>';
                s += '</tr>';
            }
            s += '</table>';
            document.getElementById('result').innerHTML = s;
        });
    });
}

Answer 1

如@mu-is-too-short所述，您没有定义在where子句中使用的JavaScript变量continent。另一点是搜索函数期望接收参数（id），但是在调用函数时不发送任何参数。但是，最后一个现在无所谓......

可能的解决方法是，在执行查询之前，将所选选项保存在名为continent的JavaScript变量中，这样您就不必更改大量代码。

var continent = $('#continent').find(":selected").text();

喜欢这篇文章：jQuery Get Selected Option From Dropdown

此外，您还需要再关闭一个<div>。

让我知道这是否有效。

SQLite动态WHERE子句不起作用

1 个答案: