Spring MVC中Ajax实现二级联动的简单实例


Posted in Javascript onJuly 06, 2016

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下。

后台Controller:

@RequestMapping("/faultType")
@ResponseBody
public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException
{
String ReturnMessage = "";
//获取所有子类故障类型
List<FaultType> fauList=faultTypeService.getById(id);
if(fauList.size()>0){
request.setAttribute("childType", fauList);
ReturnMessage = "OK";
}else {
ReturnMessage = "未找到信息";
}


//*************************************************************
Map<String,Object> ReturnMAP = new HashMap<String,Object>();
ReturnMAP.put("childType", fauList);
return ReturnMAP;
}

前台JSP:

<div class="col-sm-3">
<div class="form-group">
<label class="col-3 control-label no-padding-right">
故障类型: </label>
<select name="faulttype" id="faulttype" onchange="javascript:typeChange()">
<c:forEach items="${faultlist }" var="faulist">
<option value="${faulist.faultId }">${faulist.faultContent }</option>
</c:forEach>
</select>

</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="col-3 control-label no-padding-right">
故障: </label>
<input id="childTypeCont" name="childTypeCont"
value="" type="hidden" class="col-sm-4 form-control" placeholder="故障">

<select name="faulttype1" id="faulttype1"">
<option>--请选择--</option>
<c:forEach items="${childType }" var="faulist">
<option value="${faulist.faultId }">${faulist.faultContent }</option>
</c:forEach>
</select>
</select>
</div>
</div>

JS:

function typeChange(){
var type=$("#faulttype").val();

var html = "<option>--请选择--</option>"; 
var CommitUrl = "faultType.do?id=" + type;

$.ajax( {
type : "POST",
contentType : "application/json",
url : CommitUrl,
dataType : 'json',
success : function(result){
var Curedata = $.extend(true, [], result); 
if (Curedata.childType != null) { 
for(var i=0;i<Curedata.childType.length;i++){

html+="<option value='"+Curedata.childType[i].faultId+"'>"+Curedata.childType[i].faultContent+"</option>";
}
$("#faulttype1").empty();
$(html).appendTo("#faulttype1") ;

} }
});
}

以下是引用别人写的(原文地址:http://blog.csdn.net/gis__/article/details/6647464)

记性不好的可以收藏下: 

1,下拉框:

var cc1  = $(".formcselect[@name='country'] option[@selected]").text();//得到下拉菜单的选中项的文本(注意中间有空格) 

var cc2 = $('.formcselect[@name="country"]').val(); //得到下拉菜单的选中项的值 

var cc3 = $('.formc select[@name="country"]').attr("id");//得到下拉菜单的选中项的ID属性值 

$("#select").empty();//清空下拉框//$("#select").html(''); 

$("<optionvalueoptionvalue='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:

1.select[@name='country'] option[@selected] 表示具有name 属性, 

并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素; 

可以看出有@开头的就表示后面跟的是属性。 

2,单选框: 

$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格) 

$("input[@type=radio][@value=2]").attr("checked",'checked');//设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:  

$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值 

$("input[@type=checkbox][@checked]").each(function(){//由于复选框一般选中的是多个,所以可以循环输出 

 alert($(this).val()); 

  }); 

$("#chk1").attr("checked",'');//不打勾 

$("#chk2").attr("checked",true);//打勾 

if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.  

<script src="jquery-1.2.1.js"type="text/javascript"></script> 

<script language="javascript"type="text/javascript"> 

$(document).ready(function(){ 

$("#selectTest").change(function() 

{ 

   //alert("Hello"); 

   //alert($("#selectTest").attr("name")); 

  //$("a").attr("href","xx.html"); 

   //window.location.href="xx.html"; 

  //alert($("#selectTest").val()); 

   alert($("#selectTest option[@selected]").text()); 

   $("#selectTest").attr("value", "2"); 

}); 

}); 

</script> 

 <ahrefahref="#">aaass</a>

<!--下拉框-->

1.<select id="selectTest"name="selectTest"> 
2.<optionvalueoptionvalue="1">11</option> 
3.<optionvalueoptionvalue="2">22</option> 
4.<optionvalueoptionvalue="3">33</option> 
5.<optionvalueoptionvalue="4">44</option> 
6.<optionvalueoptionvalue="5">55</option> 
7.<optionvalueoptionvalue="6">66</option> 
8.</select> 

9.jqueryradio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 

10.var item = $('input[@name=items][@checked]').val(); 

11.获取select被选中项的文本 

12.var item = $("select[@name=items] option[@selected]").text(); 

13.select下拉框的第二个元素为当前选中值 

14.$('#select_id')[0].selectedIndex = 1; 

15.radio单选组的第二个元素为当前选中值 

16.$('input[@name=items]').get(1).checked = true; 

17.获取值: 

18.文本框,文本区域:$("#txt").attr("value"); 

19.多选框checkbox:$("#checkbox_id").attr("value"); 

20.单选组radio: $("input[@type=radio][@checked]").val(); 

21.下拉框select: $('#sel').val(); 

22.控制表单元素: 

23.文本框,文本区域:$("#txt").attr("value",'');//清空内容 

24.               $("#txt").attr("value",'11');//填充内容 

25.多选框checkbox: $("#chk1").attr("checked",'');//不打勾 

26.               $("#chk2").attr("checked",true);//打勾 

27.               if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 

28.单选组radio:$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 

29.下拉框select:$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 

30.           $("<optionvalueoptionvalue='1'>1111</option><optionvalueoptionvalue='2'>2222</option>").appendTo("#sel")//添

加下拉框的option 

31.           $("#sel").empty();//清空下拉框 

32.获取一组radio被选中项的值 

33.var item = $('input[@name=items][@checked]').val(); 

34.获取select被选中项的文本 

35.var item = $("select[@name=items] option[@selected]").text(); 

36.select下拉框的第二个元素为当前选中值 

37.$('#select_id')[0].selectedIndex = 1; 

38.radio单选组的第二个元素为当前选中值 

39.$('input[@name=items]').get(1).checked = true; 

40.获取值: 

41.文本框,文本区域:$("#txt").attr("value"); 

42.多选框checkbox:$("#checkbox_id").attr("value"); 

43.单选组radio: $("input[@type=radio][@checked]").val(); 

44.下拉框select: $('#sel').val(); 

45.控制表单元素: 

46.文本框,文本区域:$("#txt").attr("value",'');//清空内容 

47.$("#txt").attr("value",'11');//填充内容 

48.多选框checkbox: $("#chk1").attr("checked",'');//不打勾 

49.$("#chk2").attr("checked",true);//打勾 

50.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 

51.单选组radio:$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 

52.下拉框select:$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 

53.$("<optionvalueoptionvalue='1'>1111</option><optionvalueoptionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option 

54.$("#sel").empty();//清空下拉框

以上这篇Spring MVC中Ajax实现二级联动的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
layui弹出层效果实现代码
May 19 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue发送ajax请求详解
Oct 09 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
js中window.open的参数及注意注意事项
Jul 06 #Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 #Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
jQuery事件委托之Safari
Jul 05 #Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
Python中字符串的修改及传参详解
2016/11/30 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
创建绿色社区汇报材料
2014/08/22 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers