Javascript 选择后是否未显示下拉选择值?
如何使用从flask-render_模板预填充的HTML下拉列表 这是从flask-jinja2预填充的下拉列表Javascript 选择后是否未显示下拉选择值?,javascript,python,html,flask,jinja2,Javascript,Python,Html,Flask,Jinja2,如何使用从flask-render_模板预填充的HTML下拉列表 这是从flask-jinja2预填充的下拉列表 <div> <select class="test-default" id="testTime"> {% for option in options %} <option value={{ option }}>{{ option }}</option> {% endfor %}
<div>
<select class="test-default" id="testTime">
{% for option in options %}
<option value={{ option }}>{{ option }}</option>
{% endfor %}
</select>
</div>
和test.py文件-带有应用程序路径和下拉选项
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
options = ["0","7","14","30"]
return render_template("test.html", options=options)
在上述情况下,如何使用“选定属性”显示选定值
选择某个值时,
将正确的值返回到烧瓶并重新渲染。但是下拉列表显示的是第一个值,而不是选定的值
我所尝试的:
我可以为已定义的下拉列表选择下拉列表
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
options = ["0","7","14","30"]
return render_template("test.html", options=options)
已定义下拉列表-供参考
<div>
<select class="test-default" id="testTime">
<option value=0>today</option>
<option value=7>week</option>
<option value=14>fortnight</option>
<option value=30>month</option>
</select>
</div>
{{ time }}
axios使用更新的时间参数获取响应,但是您需要加载响应(即更新的HTML)才能查看更新的时间 您可以更新fetch_test_data函数,如下所示,以便在下拉值更改时加载HTML响应
function fetch_test_data(){
let test = $("#testTime").val();
axios({
method:"get",
url:"/test",
params: {
test
}
}).then(function (response) {
$(document.body).html(response.data)
});
}
如果您不需要使用axios,并且只想更新时间,那么下面的代码将在不发送请求的情况下完成此操作
<span id=timelabel>Default Time</span>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var label = document.getElementById('timelabel');
var dropdown = document.getElementById('testTime');
$("#testTime").on("change",function (evt) {
label.textContent = dropdown.value;
})
</script>
必须将“事务”视图中选定的时间传递给模板,并在渲染期间测试每个选项的值 首先,在test.py中,您必须修改事务视图,如下所示:
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
options = (
(0, 'today'),
(7, 'week'),
(14, 'fortnight'),
(30, 'month'),
)
default_time = 0
selected_time = int(request.args.get('time', default_time))
return render_template("test.html", options=options, selected_time=selected_time)
<div>
<select class="test-default" id="testTime">
{% for time, label in options %}
<option value="{{ time }}" {% if time == selected_time %}selected="selected"{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</div>
这里我们将options变量作为键标签对的元组,selected_time变量保存GET请求中所选时间的值或默认值。这两个变量都已传递给render_template函数,因此我们可以在模板文件中访问它们
在test.html模板文件中,您必须修改for循环,如下所示:
@app.route('/test', methods=["GET"])
@login_required
def transactions_view():
options = (
(0, 'today'),
(7, 'week'),
(14, 'fortnight'),
(30, 'month'),
)
default_time = 0
selected_time = int(request.args.get('time', default_time))
return render_template("test.html", options=options, selected_time=selected_time)
<div>
<select class="test-default" id="testTime">
{% for time, label in options %}
<option value="{{ time }}" {% if time == selected_time %}selected="selected"{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</div>
在这里,我们测试每个选项的时间值是否为选定时间,并相应地设置选定属性 在我看来,我们应该避免让html/呈现逻辑泄漏到路由/控制器处理程序中。因此,对于上面的示例,您应该只对html模板进行更改。最后,我相信javascript是一个更好、更干净的实现,而不是使用jinja条件 {% 设置时间_查找={ 0:今天,, 第7周:, 14:两周, 30:月,, } %} {options%%中的选项为%s} {{time_lookup[option]} {%endfor%} const urlParams=新的URLSearchParamswindow.location.search; //当前url并解析我们的查询参数?test=201 const timeParam=urlParams.gettime | | 0; //默认为0 const option=document.querySelectorselect.test-time选项[value=+timeParam+] //返回HtmleElement,其中值===timeParam option.setAttributeselected,true //设置为HTMLElement
更新了问题,请选中将变量值解析为int,例如:inttime@Zanthoxylum-胡椒粉为什么要在一个你后来放弃的问题上加上悬赏?