下拉列表应在提交表单时显示所选值

Question

我在表单上有三个元素，三个下拉框，一个通过数据库从 "year" 获取值，一个通过数据库从 "month" 获取值的下拉框，第三个文本框是日期下拉列表。我想要的是，当我 select 下拉框中的任何值并提交表单时， selected 值从下拉文本框中消失，下拉列表的第一个值出现。

我希望 dowpdown 应该在提交表单时显示 selected 值。

下面是用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>

Answer 1

您使用什么模板引擎进行 html 渲染？ Jinja、Django、Mako？这将有助于我们帮助您。但一般来说，您需要获取提交的值，然后 将它们放回 到 html 中。这意味着您需要在 for 循环中编写一个逻辑来检查提交的值是否与循环迭代值匹配。我不知道这个模板引擎的确切语法是什么，但它看起来像这样：

%for item in year_lst:
<option value="{{ item }}" %if item=submitted_item: selected=selected %end >{{ item }}</option>
%end

所以在迭代过程中你需要检查应该选择什么确切的选项。如果您需要更多帮助，请给我更多信息。

@更新

所以我们已经澄清您正在使用 Bottle 框架，我认为您正在使用 SimpleTemplate Engine 进行 html 渲染（从您发布的代码片段中可以明显看出）。

这是在提交表单后为 year/month/day 控件选择值所需执行的操作。您可以在 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 "" }}。基本上这意味着如果我们的循环值 item 等于提交值 year1，则输出 "selected=selected" 文本到 html，这将使所选年份选项呈现为选中状态。您可以阅读内联表达式 here.

并且您需要相应地更改月份和日期选择。就是这样，如果您还有其他问题，请告诉我。

下拉列表应在提交表单时显示所选值

dowpdown should display the selected value upon submission of form

html

javascript

python

drop-down-menu