dowpdown shold在提交表格时显示所选值

时间:2015-06-02 09:49:27

标签: javascript python html drop-down-menu

我在表单上有三个元素,三个下拉框,一个从" 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>

1 个答案:

答案 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

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