在同一页面上单击时从数据库输出值的下拉按钮答案

【问题标题】：Dropdown button to output value from database when clicked, on the same page在同一页面上单击时从数据库输出值的下拉按钮
【发布时间】：2018-02-23 00:38:34
【问题描述】：

对不起，我不会上传整个代码以避免抄袭，因为这是我的uni项目，但我只是想问一个简单的问题。所以基本上我有一个存储传感器数据的数据库。然后我有一个 Python 文件和 html 文件。在 Python 文件中，我导入了以下库和模块：樱桃py，sqlite3和jinja2。所以我通过 python 使用代码连接我的数据库，比如 select * from... 然后在 html 中我有代码来设置我的下拉按钮的样式，这里是下拉按钮本身：

    <div class="dropdown">
        <button onclick="sound_hist()" class="dropbtn">Previous sound data</button>
        <div id="soundData" class="dropdown-content">
            {% for d in dates %}
                <a href="">{{d}}</a>
            {% endfor %}
        </div>
    </div>

它在我的主页上创建了一个下拉按钮，当单击该按钮时，有 4 个选项可供选择，4 个日期。 But thing is, I am not sure if it is possible at all, to makes such a thing, so when the particular date has been chosen, i.e the button was clicked, the data from the database would have been shown on the same page?数据库本身有 4 列：行、日期、时间和数据。因此，我想单击下拉列表中的任何选项（日期），当单击时，在同一页面上的按钮附近，我将能够看到我的传感器在该日期拥有的时间和数据。但目前，我怀疑这根本不可能。有人可以帮忙吗？

【问题讨论】：

如果您对特定于该框架的解决方案感兴趣，您可能需要使用cherrypy 标签。

标签： javascript html sql python-3.x jinja2

【解决方案1】：

这可以通过一些简单的 Javascript 来完成，如下例所示，但数据必须包含在 Javascript 中。在您的情况下，这可能是不可能的。

我建议查看tutorials on the CherryPy website。如果您想从服务器获取数据，Ajax 和 React 教程可能是最有帮助的。

<html>
<body>
  <script>
    var sensorData = {
      Jan1: "January 1st Data",
      Jan2: "January 2nd Data",
      Jan3: "January 3rd Data"
    };

    function updateText() {
      var options = document.getElementById('dates');
      var display = document.getElementById('display')
      display.innerHTML = sensorData[options.value];
    }
  </script>

  <select id="dates" onchange="updateText()">
    <option value="Jan1">January 1</option>
    <option value="Jan2">January 2</option>
    <option value="Jan3">January 3</option>
  </select>

  <div id="display">Display Data Here</div>
</body>
</html>

【讨论】：