Question

我使用烧瓶，当我单击submit按钮时，我选择的所选项目（id=workingMethod）被清空。

我选择2，您可以在这张图片中看到它：

当我单击submit按钮时：

如何保留我选择的内容？

我的HTML代码：

<html>
    <head>
        <title>cal</title>
        <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/FlaskModelCalculation.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/bootstrap-select.css" rel="stylesheet" type="text/css"/>
        <script src="static/js/jquery-1.11.3.min.js"></script>
        <script src="static/js/bootstrap-select.js"></script>
        <script type="text/javascript">
        $(function () {
              $('#calculate').click(function(){
              var careerHistory = $("#careerHistory").val();
              if(careerHistory=="" || careerHistory==="undefined"){
                    alert("careerHistory cann't null");
                    return;
                 }
              });
        });
    </script>


    </head>
    <body>
        <div align="center" style="margin-top:60px">
            <form name="form1" method='POST'>
                    <span>careerHistory</span><input type="text" placeholder="careerHistory" id="careerHistory" name="careerHistory" class="form-control" value="{{careerHistory}}"><br/>
                    <span>wholeBookNumber</span><input type="text" placeholder="wholeBookNumber" id="wholeBookNumber" name="wholeBookNumber"  class="form-control" value="{{wholeBookNumber}}"><br/>
                    <span>reflectionBookNumber</span><input type="text" placeholder="reflectionBookNumber" id="reflectionBookNumber" name="reflectionBookNumber"  class="form-control" value="{{reflectionBookNumber}}"><br/>
                    <span>schoolClassificationCD</span><input type="text" placeholder="schoolClassificationCD" id="schoolClassificationCD" name="schoolClassificationCD" class="form-control" value="{{schoolClassificationCD}}"><br/>
                    <span>jobsNumber</span><input type="text" placeholder="jobsNumber" id="jobsNumber" name="jobsNumber"  class="form-control" value="{{jobsNumber}}"><br/>
                    <span>constructionSpecificity</span><input type="text" placeholder="constructionSpecificity" id="constructionSpecificity" name="constructionSpecificity"  class="form-control" value="{{constructionSpecificity}}"><br/>
                    <span>playingStyle</span><input type="text" placeholder="playingStyle" id="playingStyle" name="playingStyle"  class="form-control" value="{{playingStyle}}"><br/>
                    <span>workingMethod</span>
                        <select id="workingMethod" name="workingMethod" class="">
                            <option value ="0"></option>
                            <option value ="1">1</option>
                            <option value ="2">2</option>
                            <option value ="3">3</option>
                        </select><br/>
                    <span>workOvertimeAverage</span><input type="text" placeholder="workOvertimeAverage" id="workOvertimeAverage" name="workOvertimeAverage" class="form-control" value="{{workOvertimeAverage}}"><br/>
                    <input type="submit" id="calculate" class="btn btnNormal btn-primary" value="cal">
                    <input type="text" placeholder="calculationResult" name="calculationResult" readonly="readonly" class="form-control" value="{{calculationResult}}">
            </form>
        </div>
    </body>
    <footer>
    </footer>
</html>

Python Flask代码：

from flask import Flask
from flask import render_template
from flask import redirect
from flask import url_for
from flask import request
import Store_mold

app = Flask(__name__)

@app.route('/')
def index():
    return redirect(url_for('calculate'))

@app.route('/calculate',methods=['GET','POST'])
def calculate():
    if request.method =="POST":
        careerHistory = int(request.form['careerHistory'])
        wholeBookNumber = int(request.form['wholeBookNumber'])
        reflectionBookNumber = int(request.form['reflectionBookNumber'])
        schoolClassificationCD = int(request.form['schoolClassificationCD'])
        jobsNumber = int(request.form['jobsNumber'])
        constructionSpecificity = int(request.form['constructionSpecificity'])
        playingStyle = int(request.form['playingStyle'])
        workingMethod = int(request.form.get('workingMethod'))
        workOvertimeAverage = int(request.form['workOvertimeAverage'])
        calculationResult = int(Store_mold.Store_mold(careerHistory,wholeBookNumber,reflectionBookNumber,schoolClassificationCD,jobsNumber,constructionSpecificity,playingStyle,workingMethod,workOvertimeAverage))
        if calculationResult==0:
            calculationResult='yes'
        elif calculationResult==1:
            calculationResult='no'
        return render_template('index.html',careerHistory=careerHistory, wholeBookNumber=wholeBookNumber, reflectionBookNumber=reflectionBookNumber, schoolClassificationCD=schoolClassificationCD, jobsNumber=jobsNumber, constructionSpecificity=constructionSpecificity, playingStyle=playingStyle, workingMethod=workingMethod, workOvertimeAverage=workOvertimeAverage, calculationResult=calculationResult)
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

我想我应该使用sessionStorage来执行此操作，将select选项的值保存到sessionStorage，每次单击后，从sessionStorage中获取值并将其设置为select选项。

Answer 1

我使用sessionStorage来做到这一点：

UPDATE tickets SET is_send = '1';

Answer 2

使用所有其他字段，您将显式设置值：

<input type="text" ... value="{{foo}}">

但是您并没有使用workingMethod字段来做到这一点。

由于它是一个<select>字段，而不是其他字段，所以它不能像其他<input type="text">字段那样使用，因此您不能以相同的方式设置值；您必须在应选择的选项中添加selected="selected"属性。

Answer 3

在进行验证检查后，将其放入“点击计算”功能中。

"use strict";

$(function () {
    var myData = [];


    $.get("#{request.contextPath}/JobSearchItem.xhtml", function (data) {

        $("#searchTextField").autocomplete({
            minLength: 2,
            source: myData,
            select: function select(event, ui) {
                event.preventDefault();
                var url = '#{request.contextPath}/index.xhtml';
                var searchValue = ui.item.value;
                var data = new FormData();
                data.append('searchValue', searchValue);
                fetch(url, {
                    body: data,
                    method: "post"
                }).then(function (res) {
                    return res.text();
                }).then(function (text) {
                    $('#results').append($(text).find('#textTable'));
                    $('#results').append($(text).find('table'));
                    $('#results').append($(text).find('#bestTable'));
                    $("#clearone").show();
                });
            },
            response: function response(event, ui) {
                if (!ui.content.length) {
                    var message = { value: "", label: "NO SEARCH RESULT FOUND" };
                    ui.content.push(message);
                }
            }

        });


        $.each(data, function (k, v) {
            myData.push({
                id: v.id,
                label: v.label,
                value: v.id

            });
        });
    });


    $("#sJobClass").change(function () {
        var jobClassCd = $(this).val();
        if (jobClassCd !== 0) {
            var url = '#{request.contextPath}/index.xhtml';
            var searchValue = $('#sJobClass').val();
            var data = new FormData();
            data.append('searchValue', searchValue);
             fetch(url, {
                body: data,
                method: "post"
            }).then(function (res) {
                return res.text();
            }).then(function (text) {
                $('#results').append($(text).find('#textTable'));
                $('#results').append($(text).find('table'));
                $('#results').append($(text).find('#bestTable'));
                $("#clearone").show();
            });
        };
    });


});

提交表单后，清除选定的项目

3 个答案: