Javascript 用于显示Flask/python表格的下拉列表_Javascript_Python_Html_Flask_Jinja2

Javascript 用于显示Flask/python表格的下拉列表

javascript python html flask

Javascript 用于显示Flask/python表格的下拉列表,javascript,python,html,flask,jinja2,Javascript,Python,Html,Flask,Jinja2,我有一个如下所示的索引页： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Dashboard </title> <!-- Bootstrap CSS CDN --&

我有一个如下所示的索引页：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Dashboard </title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- Font Awesome JS -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>


    <!--Hospitals select list-->
    <div class="dropdown">
        <label for="sel1">Select Hospital :</label>
        <br>
        <select class="form-select form-select-lg mb-3" name="hospital" style="width:240px">
            <option value="{{hospitals[0]}}" selected>{{hospitals[0]}}</option>
            {% for hospital in hospitals[1:] %}
            <option value="{{hospital}}">{{hospital}}</option>
            {%endfor%}

        </select>
    </div>

    <!--table container starts here-->
    <div class="row">
        <!-- Table1  starts here-->
        <div class="col col-md-6">
            <div id="chart">

                <script>
             var d = {{tableJSON1 | safe}};
                Plotly.newPlot('chart', d, {});


                </script>
            </div>
        </div>
        <!-- Table1  ends here-->
        <!--table2 starts here-->
        <div class="col col-md-6">
            <div id="tal">

                <script>
                 var tabl = {{tableJSON | safe}};
                    Plotly.newPlot('tal', tabl, {});


                </script>
            </div>
        </div>

        <!--table ends here-->
        </div>

</body>
</html>

现在，我想在html上显示的表有一个名为hospital的列，选择下拉列表显示医院列表。在从下拉列表中选择医院后，我确实希望获得有关如何显示表格的帮助。在从下拉列表中选择医院之前，页面基本上保持为空。

如果我理解正确，您希望在从列表中选择医院后，在HTML表格中显示有关医院的数据

使用jinja2不可能创建动态页面，因此您必须实现一个端点，该端点接受hospital作为参数，一旦调用，它将返回需要在表中显示的数据

将onchange事件添加到select对象中，请参见此处的更多信息：，当触发该事件时，在实现的端点向服务器发出ajaxhttp请求，当收到响应时，使用http请求结果更新表

<select id="mySelect" onchange="update_html_table()">
  <option value="value_1">1</option>
  <option value="value_2">2</option>
  <option value="value_3">3</option>
</select>

由于我在本地工作，update_html_table函数的url是什么？我使用app.py文件的路径？您必须指定承载flask应用程序的计算机的ip地址。即使您在本地工作，我建议您使用pc的ip地址，而不是本地主机

<select id="mySelect" onchange="update_html_table()">
  <option value="value_1">1</option>
  <option value="value_2">2</option>
  <option value="value_3">3</option>
</select>

<script>
function update_html_table(){
      $.ajax({
        url: "https://your_server/your_new_endpoint?hospital=" + document.getElementById("mySelect").value,
        type: "get"
        success: function(response) {
            render_html_table(response);
        },
        error: function(xhr) {
          //Do Something to handle error
        }
      });
    }

function render_html_table(data) {
  //remove old row from your html table
  $("#your-table-id").empty();
  //cycle your json response and with jquery add element to your html table
  // https://www.js-tutorials.com/jquery-tutorials/dynamically-add-remove-rows-table-using-jquery/
}
</script>