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 相关文章推荐
js call方法详细介绍(js 的继承)
Nov 18 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
json传值以及ajax接收详解
May 24 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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 方便水印和缩略图的图形类
2009/05/21 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
Python 正则表达式实现计算器功能
2017/04/29 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python实现视频分帧效果
2019/05/31 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
应届生财务管理求职信
2013/11/06 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
预备党员自我评价范文
2015/03/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
听课评课活动心得体会
2016/01/15 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python