jquery操作单选框,复选框,下拉菜单提交表单,并从接收后台值在结果页显示

使用jquery实现单选框,复选框,下拉菜单的提交并对将结果返回到前台进行显示。

页面提交表单

 1 <form id="form1" name="form1" method="post" action="sub.action">
 2   <input type="checkbox" name="d" id="d1" value="da1"/>da1
 3   <input type="checkbox" name="d" id="d2" value="da2"/>da2
 4   <input type="checkbox" name="d" id="d3" value="da3"/>da3
 5   <input type="checkbox" name="d" id="d4" value="da4"/>da4
 6 <BR />
 7   <input type="radio" name="radio" id="dan1" value="male" />male
 8   <input type="radio" name="radio" id="dan2" value="female" />female
 9 <BR />
10   <select name="select" id="select">
11   <option value="1"> SELECT1</option>
12   <option value="2"> SELECT2</option>
13   <option value="3"> SELECT3</option>
14   </select>
15   <BR /><BR />
16   <button onclick="document.form1.submit()">button</button>
17 </form>

后台java代码省略,主要在于记录如何接收后台传到目标页面后进行操作:

 1 <script type="text/javascript">
 2         $(function(){
 3         var str = '${d}';
 4         var str2 = '${radio}';
 5         var str3 = '${select}';
 6         var v2 = str.split(', ');
 7             for(var i = 0; i < v2.length; i++){
 8                 $("input[name='d']").each(function() {
 9                     if($(this).val()==v2[i]){
10                             $(this).attr("checked",true);
11                         }
12                 });
13             }
14             if(str2 == 'male'){
15                 $("#dan1").attr("checked",true);
16                 $("#dan2").attr("checked",false);
17                 }
18             $("#select option").each(function() {
19                     if(str3 == $(this).val()){
20                         $(this).attr("selected",true);
21                     }
22                 });
23             });
24             
25             
26     </script>

结果页设计:

 1  <input type="checkbox" name="d" id="d1" value="da1"/>da1
 2   <input type="checkbox" name="d" id="d2" value="da2"/>da2
 3   <input type="checkbox" name="d" id="d3" value="da3"/>da3
 4   <input type="checkbox" name="d" id="d4" value="da4"/>da4
 5 <BR />
 6   <input type="radio" name="radio" id="dan1" value="male"/>male
 7   <input type="radio" name="radio" id="dan2" value="female" checked="checked"/>female
 8 <BR />
 9   <select name="select" id="select">
10   <option value="1"> SELECT1</option>
11   <option value="2"> SELECT2</option>
12   <option value="3"> SELECT3</option>
13   </select>
14   <BR /><BR />

 

posted @ 2013-01-17 21:50  Princeling  阅读(1076)  评论(0编辑  收藏  举报