我有一個包含 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>
選擇2
<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>
和蟒蛇
fmea=request.form.get("fmea")
我很容易獲得前兩個輸入值，但 fmea 標記回傳無。如果您能給我一個提示如何獲得所選值，我將非常感激。
uj5u.com熱心網友回復：
下面的示例向您展示了如何使用 AJAX 將帶有選擇框的表單提交到服務器。
一旦提交事件被觸發，整個表單就會通過該serialize函式進行相應的格式化，然后發送。
由于您選擇了可以選擇多個選項的選擇欄位的變體，因此物件ImmutableMultiDict提供的request.form包含元組串列。在這種情況下，您可以使用request.form.getlist(...)選擇框的名稱來查詢包含的值，正如您已經從其他輸入欄位中知道的那樣。回傳值對應于具有選定值的串列。這些是通過指定型別引數自動轉換的。
燒瓶（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 (模板/index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select2 Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/425135.html
標籤：阿贾克斯 烧瓶 选择 jQuery-select2
下一篇：如何在燒瓶中進行分頁