Question

我试图从sqlite数据库表中获取数据以提供给我的下拉菜单列表。看下面我的想法。问题是我不知道如何将JS函数与HTML部分结合起来。

中将Html.HTML

    <label for="name"><b>Activity Name:/b></label>          
    <select name="activity" id="activity" required>
        <option value="">--Select--</option>
        getActivity()
    </select>

JS.js

    function getActivity(tx) {
            tx.executeSql('SELECT * FROM tblactivity', [], queryActivity, errorHandler);
                function queryActivity(tx, results) {
            var len = results.rows.length;
            for (var i = 0; i < len; i++) {
               var SelectActivity +='<option value="' + results.rows.item(i).activityID +'">'+ results.rows.item(i).ActivityName +'</Option>';
            }
            //SelectActivity +="</Option";
            document.getElementById("activity").innerHTML =SelectActivity;
        }}

或者在HTML.html上，将功能纳入

    <label for="name"><b>Activity Name:/b></label>          
    <select name="activity" id="activity" required>
    <script>
        function getActivity(tx) {
            tx.executeSql('SELECT * FROM tblactivity', [], queryActivity, errorHandler);
                function queryActivity(tx, results) {
            var len = results.rows.length;
            for (var i = 0; i < len; i++) {
               var SelectActivity +='<option value="' + results.rows.item(i).activityID +'">'+ results.rows.item(i).ActivityName +'</Option>';
            }
            //SelectActivity +="</Option";
            document.getElementById("activity").innerHTML =SelectActivity;
        }}
    </script>
    </select>

Answer 1

如果您想在加载时填充选项，我建议将您的js包装在

中

$(document).ready(function() {
    //your function
});

这样它就会在HTML加载后运行，你不需要在HTML端做任何事情（这意味着你应该删除你对函数的调用）。

编辑：如果您想要使用纯JS方法，那么该解决方案就是JQuery：

window.onload = function() {
    //your function
};

请记住，这个会在运行之前加载所有内容，例如图像和其他媒体;在较慢的连接上，用户在加载之前可能会看到一个空的选择。

编辑（评论后）：请检查这个小提琴：https://jsfiddle.net/chn1oL8m/5/ 我想我现在理解你的问题，这会帮助你，只需要使用查询而不是随机值（我无法访问数据库显然=]）

来自sqlite数据库表的下拉菜单列表

1 个答案: