在同一页面上单击下拉按钮以从数据库中输出值

Question

Sorry, I won't upload the whole code to avoid plagiarism, because this is my uni project, but I just want to ask a simple question. 抱歉，我不会上载整个代码以避免窃，因为这是我的uni项目，但我只想问一个简单的问题。 So basically I have a database with stored sensor data. 所以基本上我有一个存储传感器数据的数据库。 Then I have a Python file and html file. 然后，我有一个Python文件和html文件。 In Python file I have imported the following libraries and modules: cherrypy, sqlite3 and jinja2. 在Python文件中，我导入了以下库和模块：cherrypy，sqlite3和jinja2。 So I connect my database via python with codes, like select * from... Then in html I have the code to style my dropdown button and here is the dropdown button itself: 所以我通过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>

Which creates a dropdown button on my home page and that button, when clicked, has 4 options to choose from, 4 dates. 它会在我的主页上创建一个下拉按钮，并且单击该按钮时，有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, ie the button was clicked, the data from the database would have been shown on the same page? 但是问题是，我不确定是否有可能做这样的事情，因此，当选择了特定的日期（即单击了按钮）后，数据库中的数据会显示在同一页面上吗？ The database itself has 4 columns: row, date, time and data. 数据库本身有4列：行，日期，时间和数据。 So I want to click any option(date) in my dropdown and when clicked, on the same page, near the button, I would be able to see the time and data that my sensor had on that date. 因此，我想单击下拉菜单中的任何选项（日期），并且在同一页面上的按钮旁边单击时，我将能够看到该日期传感器的时间和数据。 But at the moment , I am doubting that this is possible to do at all. 但是目前，我怀疑这是否可能做到。 Can someone help, please? 有人可以帮忙吗？

Answer 1

This can be accomplished with some simple Javascript as shown in the example below, but the data has to be included in the Javascript. 可以使用一些简单的Javascript完成此操作，如下面的示例所示，但是数据必须包含在Javascript中。 This may not be possible in your situation. 在您的情况下，这可能是不可能的。

I suggest looking at the tutorials on the CherryPy website . 我建议查看CherryPy网站上的教程。 The Ajax and React tutorials would probably be the most helpful if you want to obtain data from the server. 如果您想从服务器获取数据，那么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>

在同一页面上单击下拉按钮以从数据库中输出值

问题描述

1 个解决方案

解决方案1
0 2018-02-22 16:38:34

在同一页面上单击下拉按钮以从数据库中输出值

问题描述

1 个解决方案

解决方案1 0 2018-02-22 16:38:34

解决方案1
0 2018-02-22 16:38:34