我在表单上有三个元素,三个下拉框,一个从" year"获取值。通过数据库,以及从"月"获取值的下拉列表通过数据库,以及第三个文本框,即日期下拉列表。 我想要的是,当我从下拉框中选择任何值并提交表单时,所选值将从下拉文本框中消失,并显示下拉列表的第一个值。
我希望在提交表格时,下拉列表应显示所选值。
希望您了解我的问题并帮助我。 下面是用html和JS编写的代码,前端是python:
<label class="labels">Year 1:</label>
<select name='year1' id='year1' onchange ="chng_func(this.value,{{col_list}})" >
%for item in year_lst:
<option value="{{ item }}" selected=selected>{{ item }}</option>
%end
</select>
<label class="labels">Month 1:</label>
<select name = 'month1' id='month1' onchange="monthFunc()">
%for item in month_lst:
<option value="{{ item }}" >{{ item }}</option>
%end
</select>
<label class="labels">Day 1:</label>
<select name = 'day1' id='day1'>
<script>
monthFunc();
</script>
</select>
答案 0 :(得分:0)
您使用什么模板引擎进行html渲染? Jinja,Django,Mako?这将有助于我们为您提供帮助。 但一般来说,您需要将提交的值和将它们放回到html中。这意味着您需要在for循环中编写一个逻辑来检查提交的值是否与循环迭代值匹配。 我不确切知道这个模板引擎的语法是什么,但它看起来像这样:
%for item in year_lst:
<option value="{{ item }}" %if item=submitted_item: selected=selected %end >{{ item }}</option>
%end
因此,在迭代期间,您需要检查应选择哪个确切选项。 如果您需要获得更多帮助,请给我更多信息。
@UPDATE
所以我们已经澄清你正在使用Bottle框架,我认为你正在使用SimpleTemplate Engine进行html渲染(从你发布的代码片段中可以看出这一点)。
以下是在表单提交后为年/月/日控件选择值所需执行的操作。 您可以在this section中了解表单提交处理。
因此,让我们考虑您的表单提交方法是http POST:
<form method=POST ...>
</form>
在这种情况下,为了处理提交的值,您需要在服务器端具有以下路由处理程序:
# this route will serve your form POST submission
@route('/your_route', method='POST')
def route_handler():
# here you're reading selected values from request
year1 = request.forms.get('year1')
month1 = request.forms.get('month1')
day1 = request.forms.get('day1')
# and here you're setting that values back to the template to write a logic html side
return template('your_template', year1=year1, month1=month1, day1=day1)
最后你的html应该是这样的:
<select name='year1' id='year1' onchange ="chng_func(this.value,{col_list}})" >
%for item in year_lst:
<option value="{{ item }}" {{ "selected=selected" if item = year1 else "" }}>{{ item }}</option>
%end
</select>
让我们看看这部分做了什么:{{ "selected=selected" if item = year1 else "" }}
。基本上,这意味着如果我们的循环值项等于提交值 year1 ,则将“selected = selected”文本输出到html,将使所选年份选项呈现为已选中。您可以阅读内联表达式here。
您需要相应地更改月份和日期选择。 就是这样,如果您有任何其他问题,请告诉我。