使用 HTML 和 Javascript 檢測第二個下拉列表（級聯）的變化
[英]Detecting change in second dropdown (cascading) using HTML & Javascript
問題描述
我在捕獲級聯下拉列表的第二個下拉列表中的更改時遇到了一些麻煩。 基本上我的設置是這樣的：用戶首先從第一個下拉列表中選擇一個 ETF。 選擇 ETF 后，更改函數會檢測選擇，使用 AJAX 將其發送到 Python，並根據 ETF 中的持有量（級聯）填充第二個下拉列表。 這部分工作完美。 對於第二個下拉列表，我希望用戶選擇一個視覺對象，然后該選擇也將發送到 Python，然后生成一個圖表。 我還沒有到那一步，但我正試圖只是閃現一條消息，讓我知道它正在工作，但由於某種原因，第二個更改功能不起作用。
這是 HTML：
<body> id="body" name="body">
<div class="container">
<h1 align="center">Welcome to the Alpaca Pair Trading Application! </h1>
<div class="row">
<div class="col-md-6">
<label>Select ETF</label>
<select name="etfs" data-live-search="true" id="etfs" class="form-control" class="selectpicker" title="Select ETF">
{% for etf in etfs %}
<option value="{{etf}}">{{etf}}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6">
<label>Select Visual</label>
<select name="visuals" data-live-search="true" id="visuals" class="form-control" class="selectpicker" title="Select Visual"> </select>
</div>
</div>
</div>
<br>
{% for message in get_flashed_messages() %}
<p> {{ message }} </p>
{% endfor %}
<br>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js">
</script>
</body>
<script type="text/javascript">
$("#etfs").change(function() {
$.ajax({
type: "POST",
url: "{{ url_for('visuals') }}",
data: {
etf: $("#etfs").val()
},
success: function(data) {
var html = "";
for (var count = 0; count < data.length; count++) {
html += '<option value="' + data[count].id + '">' + data[count].visual + "</option>";
}
$("#visuals").html(html);
}
});
});
</script>
<script type="text/javascript">
$(document).on("change", "$visuals", function() {
$.ajax({
type: "POST",
url: "{{ url_for('graphs') }}",
data: {
visual: $("#visuals").val()
},
success: function(data) {
var html = "";
}
}
});
</script>
這是python代碼：
app=Flask(__name__)
@app.route("/")
def index():
etfs=['DIA','XLV','XLU','XLE','VNQ','GLD/SLV','QQQ','XLP','XLF']
return render_template("index.html", etfs=etfs)
@app.route("/visuals", methods=["POST","GET"])
def visuals():
etf_dict={'DIA':['UNH','GS','HD','MSFT','CRM'],'XLP':['PG','KO','PEP','WMT','COST'],
'XLV':['JNJ','UNH','PFE','ABT','ABBV'],'XLF':['BRK.B','JPM','BAC','WFC','C'],
'XLU':['NEE','DUK','SO','D','EXC'],'VNQ':['AMT','PLD','CCI','EQIX'],
'QQQ':['AAPL','MSFT','AMZN','GOOG','FB'],'XLE':['XOM','CVX','COP','MPC','SLB'],
'GLD/SLV':['GLD','SLV']}
if request.method == 'POST':
etf = request.form['etf']
holdings=etf_dict[etf]
options_list=[]
if etf=='GLD/SLV':
options_dict={}
options_dict['id']=etf
options_dict['visual']='GLD vs SLV'
options_list.append(options_dict)
else:
for i in holdings:
options_dict={}
options_dict['id']=etf
options_dict['visual']=i+' vs '+etf
options_list.append(options_dict)
options_list.append({'id':etf,
'visual': 'All Holdings vs ' +etf})
return jsonify(options_list)
@app.route("/graphs", methods=["POST","GET"])
def graphs():
print("inside graphs function")
if request.method == 'POST':
print("received post request from front end")
graph = request.form['visual']
flash("This worked! The graph chosen is" + graph)
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
這是 Web 應用程序屏幕的外觀。 如您所見，當我選擇“XLE”時，它會正確更新第二個下拉列表，因此我知道更改功能在第一個下拉列表中正常工作。
問題是當我在第二個下拉列表中選擇一個視覺對象時，另一個更改功能似乎沒有運行..
1 個解決方案
解決方案1
1 2021-11-03 04:29:41
我發現我應該使用表單標簽來提交每個下拉列表中的數據，而不是嘗試檢測第二個下拉列表中的更改。
這是更新后的 HTML：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Alpaca Pair Trading App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"> <link rel="stylesheet" href={{url_for( 'static',filename='css/main.css' )}}> </script> </head> <body> <form action='/graphs' method='POST'> <div class="container"> <h1 align="center">Welcome to the Alpaca Pair Trading Application! </h1> <div class="row"> <div class="col-md-6"> <label>Select ETF</label> <select name="etfs" data-live-search="true" id="etfs" class="form-control" class="selectpicker" title="Select ETF"> {% for etf in etfs %} <option value="{{etf}}">{{etf}}</option> {% endfor %} </select> </div> <div class="col-md-6"> <label>Select Visual</label> <select name="visuals" data-live-search="true" id="visuals" class="form-control" class="selectpicker" title="Select Visual"> </select> </div> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-md-4"> <input type="submit" name="next" value="Go" class="btn btn-primary"> </div> </div> </div> </form> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"> </script> <script type="text/javascript"> $("#etfs").change(function() { $.ajax({ type: "POST", url: "{{ url_for('visuals') }}", data: { etf: $("#etfs").val() }, success: function(data) { var html = ""; for (var count = 0; count < data.length; count++) { html += '<option value="' + data[count].visual + '">' + data[count].visual + "</option>"; } $("#visuals").html(html); } }); }); </script> </body> </html>
如何使用純JavaScript激活級聯下拉自動選擇
[英]How to activate Cascading Dropdown auto-selection using pure javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.