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 相关文章推荐
javascript中的delete使用详解
Apr 11 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
JS实现简单九宫格抽奖
Jun 28 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
我的论坛源代码(四)
2006/10/09 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python表格存取的方法
2018/03/07 Python
Python实现简单http服务器
2018/04/12 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
岗位聘任书范文
2014/03/29 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
谢师宴学生致辞
2015/07/27 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python