动态下拉使用JQuery和Flask不工作
Dynamic drop down using JQuery and Flask not working
嗨,我正在使用Flask编写一个小应用程序。我必须根据数据库的输出更新下拉菜单。我不能动态地添加选项。
Javascript代码:<script type="text/javascript">
function filldata(){
var sample = document.getElementById("filter-select").value;
jQuery.support.cors = true;
$.post("/test",{"filter_type":sample},function(data,status){
var tmp = data.output;
alert(tmp.length);
var sel = document.getElementById('further-select');
for(var i =0;i<tmp.length;i++){
console.log(tmp[i]);
alert("<option>"+tmp[i]+"</option>");
var opt = document.createElement('option');
opt.innerHTML = tmp[i];
opt.value = tmp[i];
sel.appendChild(opt);
}
});
}
</script>
服务器代码:@app.route('/test',methods=['POST'])
def test():
tmp = request.form.get('filter_type')
con = mdb.connect('localhost', 'root', 'root', 'sample')
cur = con.cursor()
cur.execute("SELECT DISTINCT "+tmp+" FROM logdata")
res = cur.fetchall()
con.close()
return jsonify(output=res)
我可以知道我错在哪里吗?谢谢你。
编辑:我已经包含了HTML代码。
HTML:<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#ts"><i class="fa fa-fw fa-dashboard"></i> Time Period <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="ts" class="collapse">
<select id="time-stamp">
<option value="Till now">Till Now</option>
<option value="Yesterday">Yesterday</option>
<option value="Last Week">Last Week</option>
<option value="Last Month">Last Month</option>
<option value="Last 6 months">Last 6 months</option>
<option value="Customize">Customize</option>
</select>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#ns"><i class="fa fa-fw fa-arrows-v"></i> Select Nodes <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="ns" class="collapse">
<select id="nodes-select" multiple="multiple">
<option value="Till now">Till Now</option>
<option value="Yesterday">Yesterday</option>
<option value="Last Week">Last Week</option>
<option value="Last Month">Last Month</option>
<option value="Last 6 months">Last 6 months</option>
<option value="Customize">Customize</option>
</select>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#fs"><i class="fa fa-fw fa-arrows-v"></i> Select Filter <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="fs" class="collapse">
<select id="filter-select" onchange="filldata()">
<option value="mac">MAC</option>
<option value="sublbl">SUBLBL</option>
<option value="vrf">VRF</option>
<option value="ifhndl">IFHNDL</option>
<option value="compid">COMP_ID</option>
<option value="v4addr">V4_ADDR</option>
<option value="v6addr">V6_ADDR</option>
</select>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#ff"><i class="fa fa-fw fa-arrows-v"></i> Select items <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="ff" class="collapse">
<select id="further-select" multiple="multiple" >
</select>
</ul>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#cs"><i class="fa fa-fw fa-bar-chart-o"></i> Charts <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="cs" class="collapse">
<select id="chart-select">
<option value="error_info">Error Info</option>
<option value="session_history">Session History</option>
</select>
</ul>
</li>
</ul>
</div>
您编写了一个Javascript函数,但从未调用过它。您应该将代码放在$document.ready()中
这里有一个更一般的答案。我把它贴在这里,因为这个问题是最密切相关的,很可能在搜索中出现。
在我的情况下,jQuery显示为加载,但拒绝触发,因为(最终我意识到)我有我的jQuery在一个脚本块,被导入比jQuery cdn:
base.html
<body>
<div>Stuff on page...</div>
{% block scripts %} {% endblock %} <!-- pulling scripts in from a child template -->
<script src="https://jquery.example.com"></script>
</body>
,一旦我改变它们的位置,它就可以完美地工作了。
<body>
<div>Stuff on page...</div>
<script src="https://jquery.example.com"></script>
{% block scripts %} {% endblock %}
</body>
有时候解决方案非常简单,以至于没有人愿意把它贴在任何地方,然后像我这样的人就完全被困住了。所以我把它放在这里,希望它能为别人节省我失去的时间。
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- 动态下拉使用JQuery和Flask不工作
- CSS不能与Flask一起工作
- 在Python + Flask中随时间工作