您现在的位置:首页 >> 前端 >> 内容

改变HTML下拉框选项的方法

时间:2012/12/30 13:07:33 点击:

  核心提示:提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。[html]SELECT id=idState style=wid...

 

 

 

 

提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。 

 

 

[html] 

<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}">  

    <OPTION value="">全部</OPTION>  

    <OPTION value="1">通过</OPTION>  

    <OPTION value="2">末通过</OPTION>  

    <OPTION value="3">待处理</OPTION>  

</SELECT>  

 

<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}">

    <OPTION value="">全部</OPTION>

    <OPTION value="1">通过</OPTION>

    <OPTION value="2">末通过</OPTION>

    <OPTION value="3">待处理</OPTION>

</SELECT>

一种临时的解决方案是在vm文件末尾加上一段脚本为下拉框赋值:

 

 

[html] 

<script>  

    $('#idState').val('$!{state}');  

</script>  

 

<script>

    $('#idState').val('$!{state}');

</script>

 

 

另一种方案是设置默认选中项:

 

 

[html] 

<SELECT id="idState" style="width:150" name="state" value="$!{state}">  

    <OPTION value="">全部</OPTION>  

    <OPTION value="1">通过</OPTION>  

    <OPTION value="2" SELECTED>末通过</OPTION>  

    <OPTION value="3">待处理</OPTION>  

</SELECT>  

 

<SELECT id="idState" style="width:150" name="state" value="$!{state}">

    <OPTION value="">全部</OPTION>

    <OPTION value="1">通过</OPTION>

    <OPTION value="2" SELECTED>末通过</OPTION>

    <OPTION value="3">待处理</OPTION>

</SELECT>

用VTL的写法就是: 

 

 

[html] 

<SELECT id="idState" style="width:150" name="state" value="$!{state}">  

    <OPTION value="">全部</OPTION>  

    <OPTION #if($!{state} == 1) SELECTED #end  value="1">通过</OPTION>  

    <OPTION #if($!{state} == 2) SELECTED #end  value="2">末通过</OPTION>  

    <OPTION #if($!{state} == 3) SELECTED #end  value="3">待处理</OPTION>  

</SELECT>  

 

<SELECT id="idState" style="width:150" name="state" value="$!{state}">

    <OPTION value="">全部</OPTION>

    <OPTION #if($!{state} == 1) SELECTED #end  value="1">通过</OPTION>

    <OPTION #if($!{state} == 2) SELECTED #end  value="2">末通过</OPTION>

    <OPTION #if($!{state} == 3) SELECTED #end  value="3">待处理</OPTION>

</SELECT>

这里要注意的是:进行==比较时,Velocity是区分类型的,如果用字符串“1”、“2”、“3”比较会始终得到false。

 

 

参考:

 

velocity中比较的问题 https://www.oschina.net/question/237818_38403?sort=time&p=1

 

 

 

 

[html] 

<PRE class=html name="code"><SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif"><SPAN style="WHITE-SPACE: normal">  

</SPAN></SPAN></PRE>  

<PRE></PRE>  

<PRE></PRE>  

<PRE></PRE>  

 

Tags:改变 变H HT TM 
作者:网络 来源:不详