网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

改变HTML下拉框选项的方法 - html/css语言栏目：

来源：自学PHP网    时间：2015-04-14 14:50 作者： 阅读:次

[导读] 提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。[html]SELECT id=idState style=width:150 name=state selectedIndex=$!{state} ......

 
 
 
 
提交表单后返回的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中比较的问题 http://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>  
 

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论