将 select2 值从下拉列表发送到烧瓶

Question

我有一个包含 3 个不同值的下拉 select2 字段。但是如何将下拉列表中的选定值发送到烧瓶程序中的变量？这是我的以下代码以及我到目前为止尝试过的代码

<script type="text/javascript">
                //var hugo=document.getElementById("fmea").value;
                $(document).on('submit','#form',function(e)
                               {
                  e.preventDefault();
                  $.ajax({
                    type:'POST',
                    url:'/index',
                    data:{
                      event:$("#event").val(),
                      context:$("#context").val(),
                      //'fmea[]':$("#fmea.select2").val() 
                      //fmea:$('.test').select2(content[0]) 
                      fmea:JSON.stringify(fmea)
                    },
                    //traditional:true,
                    success:function()
                    {
           
                      draw();
                    }
                  })
                });
            </script>

select2

<script>
                var content = [
                    {id: 0, text: "Event1"},
                    {id: 1, text: "Event2 "},
                    {id: 2, text: "Event4"},
                ];
            
            
                $(".test").select2({
                     data:content,
                     // minimumInputLength: 2,
                     width: '35%',
                     multiple:true,
                     placeholder:"Enter another event",
                     // templateResult:formatState
            
                });

和html代码

<form method="post" id="form" enctype="multipart/form-data">
                                    <input type="text" name="event" id="event" class="btn" placeholder="Event" >
                                    <input type="text" name="context" id="context" class="btn" placeholder="Context" >
                                    <input type ="text" name="fmea" id="fmea" class="btn test" placeholder="Select another Event">
                                    <br>
                                    <br>
                                    <button type="submit" class="btn btn-primary" onclick="hide()" >Show Graph</button>                                    
</form>

和python

fmea=request.form.get("fmea")

我很容易获得前两个输入值，但是 fmea 标签 returns None。如果您能告诉我如何获取所选值，我将不胜感激。

Answer 1

下面的示例向您展示了如何使用 AJAX 将带有 select 框的表单提交到服务器 AJAX。

一旦触发提交事件，整个表单就会通过 serialize 函数进行相应的格式化，然后发送。
由于您选择了 selection 字段的变体，其中可以 selected 多个选项，因此 request.form 对象提供的 ImmutableMultiDict 包含一个元组列表。在这种情况下，您可以使用 request.form.getlist(...) 来查询使用 selection 框名称包含的值，正如您已经从其他输入字段中了解到的那样。 return 值对应于具有 selected 值的列表。这些通过指定类型参数自动转换。

烧瓶 (app.py)

from flask import Flask 
from flask import (
    render_template, 
    request, 
    jsonify
)

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/data', methods=['POST'])
def data():
    events = request.form.getlist('events', type=int)
    return jsonify(selected=events)

HTML (templates/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Select2 Example</title>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <form name="my-form" method="post">
      <select name="events"></select>
      <button type="submit">Submit</button>
    </form>

    <output name="result"></output>

    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script type="text/javascript">
      (function(uri) {
        $(document).ready(function() {
          const content = [
            {id: 0, text: 'Event 1'},
            {id: 1, text: 'Event 2'},
            {id: 2, text: 'Event 3'},
          ];
          $('select[name="events"]').select2({
            data: content,
            width: '35%',
            multiple: true,
            placeholder: 'Enter another event'
          });

          $('form[name="my-form"]').submit(function(evt) {
            evt.preventDefault();
            $.ajax({
              method: 'POST',
              url: uri,
              data: $(this).serialize()
            }).done(function(data) {
              $('output[name="result"]').html(data.selected.join(','));
            })
          });
        });
      })({{ url_for('.data') | tojson }});
    </script>
  </body>
</html>

将 select2 值从下拉列表发送到烧瓶

Send select2 value from dropdown to flask

ajax

flask

select

jquery-select2

烧瓶 (app.py)

HTML (templates/index.html)