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 />