如何从 HTML 中的下拉菜单中获取价值以在我的 Flask 应用程序中使用？

Question

我试图从来自熊猫数据框的下拉菜单中获取一个值，该数据框有一些餐厅信息，例如（名称、地址、评级等）我只是在这里选择名称选项客户能够选择餐厅名称...我需要客户将提供的值，然后我将使用此值使用我的 ML 代码进行预测。

到目前为止，我选择了在按钮中显示的数据框信息，但是，我不知道如何获取此信息以使用后记。 （有些地方他们说要使用，GET，其他地方要使用。我对 javascript 没有太多了解。感谢您的帮助。

问候

使用烧瓶。

from flask import Flask, request, render_template,url_for
from flask_bootstrap import Bootstrap

import pandas as pd


app = Flask(__name__)
Bootstrap(app)


@app.route('/test')
def test():
    data= pd.read_csv("data/restaurants.csv")
    data= data["Name"]
    return render_template('test.html', data= data)

测试.html

{% extends "bootstrap/base.html" %}

{% block content %}

<style>
.jumbotron {
background-color: #7547bd; 
color: #ffffff;
}
</style>

<body>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">Deep Free from...</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about">ABOUT</a></li>
<li><a href="test">CUISINE STYLE</a></li>
<li><a href="location">LOCATION</a></li>
</ul>
</div>
</div>
</nav>

<div class="jumbotron text-center">
<h1>Choose the restaurant </h1>
<p>See the 5 Similar Cuisine Style</p>
<div class="dropdown">

<center>

<div class="btn-group dropright">
<button type="button" class="btn btn-primary">
Select Restaurant
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret">.</span>
</button>
<div class="dropdown-menu">

</div>



<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for datanum in data %}
<li role="presentation" class="divider"></li>
<p></p> <a class="dropdown-item" href=# value={{datanum}} id={{datanum}} >{{datanum}}</a></p>
{% endfor %}
</div>
</div>
</div>
</div>
</center>
</div>

</div>
</div>

<input type='hidden' id={{datanum}} value=''/>



<center>
<script>

document.querySelectorAll('a').forEach( function(el) {

el.addEventListener('click', function() {
var nameres = el.textContent;
document.querySelector('.dropdown-toggle').innerText = nameres;
document.querySelector('#{{datanum}}').value = nameres; 
});
});


</script>
</center> 
<div class="container-fluid bg-">

<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Dublin, IRL</p>
<p><span class="glyphicon glyphicon-phone"></span> +383 878119949</p>
<p><span class="glyphicon glyphicon-envelope"></span> 10519637@mydbs.ie</p>
</div>

</div>

</div>
</body>


{% endblock %}

Answer 1

尝试这个：

主文件

@main.route("/page", methods=['GET', 'POST'])
def page():
    if request.method == "POST":
        value_1 = request.form["value_1"]
        # Add code that uses user input here

    context = {
        'dropdown_items' : ["A","B","C","D","E"]
    }
    return render_template('page.html', **context)

页面.html

{% extends "bootstrap/base.html" %}
{% block content %}
<form method="POST" action="{{ url_for('main.page') }}">
    <label>Dropdop Name: </label>
    <div class="dropdown">
        <select name="start_location">
            {% for x in dropdown_items %}
                <option value = "{{x}}">{{x}}</option>
            {% endfor %}
        </select>
    </div>
</form>
{% endblock %}

样式文件

.custom-select_drop_flight {
  position: relative;
  font-family: Arial;
}

.custom-select_drop_flight select {
  display: none;
}

.select-selected {
  background-color: DodgerBlue;
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

Answer 2

我为我的案例找到了一个更简单的解决方案，现在显示在一个变量中......现在我正在寻找如何将其发送到我的 ML 代码。

<!DOCTYPE html>
<html>
<head>
<title>Deep free from...</title>
</head>

<body>



<p id="result"></p>

<select id="resn">
{% for datanum in data %}
<option value={{datanum}} id={{datanum}} >{{datanum}} </option>
{% endfor %}
</select>

<script>

function GetSelectedText(){
var e = document.getElementById("resn");
var result = e.options[e.selectedIndex].text;

document.getElementById("result").innerHTML = result;
}

</script>

<br/>
<br/>


<button type="button" onclick="GetSelectedText()">Confirm Restaurant </button>
</body>

</html>

如何从 HTML 中的下拉菜单中获取价值以在我的 Flask 应用程序中使用？

问题描述

2 个解决方案

解决方案1
0 2019-12-09 23:48:13

解决方案2
0 2019-12-10 22:43:32

如何从 HTML 中的下拉菜单中获取价值以在我的 Flask 应用程序中使用？

问题描述

2 个解决方案

解决方案1 0 2019-12-09 23:48:13

解决方案2 0 2019-12-10 22:43:32

解决方案1
0 2019-12-09 23:48:13

解决方案2
0 2019-12-10 22:43:32