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

Question

我在表单上有三个元素，三个下拉框，一个通过数据库从“年”获取值，一个通过数据库从“月”获取值的下拉列表，第三个文本框是日期下拉列表。 我想要的是，当我从下拉框中选择任何值并提交表单时，所选值从下拉文本框中消失，并且出现下拉列表的第一个值。

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

下面是用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 呈现(从您发布的代码片段中可以明显看出)。

这是您在提交表单后为年/月/日控件选择值所需执行的操作。您可以在 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 .

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