Ajax+Json 级联菜单实现代码
更新时间：2009年10月27日 21:38:49 作者：
Ajax+Json 级联菜单实现代码，需要的朋友可以参考下。
第一个下拉框:
<select id="select" name="rawfoodBasic.category" onchange="doChange(this.value);">
//第一个下拉框里的值
</select>
第二个下拉框:
<select id="subSelect" name="rawfoodBasic.absorb" onchange="javascript:alert(this.value);" > //要3及菜单还可以在次写相应的时间
<option value="0">--请选择二级菜单-- </option>
</select>
js代码:
<script type="text/javascript">
$.ajaxSetup({
cache:false
}); //清除ajax中之前的值
function doChange(obj){
var url = '<c:url value="/nutrition/getSubDictDataToJsonByCategory.action"/>'+"?rawfood.category="+obj;//第一个下拉框选中后进入的action,action中给第二个下拉框所需的值赋值
$.getJSON(url,function(json){
var seleOjb=document.getElementById("subSelect");
for(var k=0;k<seleOjb.options.length;k++){
seleOjb.options.remove(k); //当再选中第一个下拉框中的值时,把第二个下拉框中原来的值清除
}
$.each(json.subCategoryDictList,function(index,subDictData){
var optionj=document.createElement("option"); //为第二个下拉框赋值
optionj.value = subDictData.id;
//alert(subDictData.id);
optionj.text=subDictData.name;
seleOjb.add(optionj);
});
});
}
</script>
<action name="getSubDictDataToJsonByCategory" class="rawfoodAction" method="getSubDictDataToJsonByCategory">
<result name="success" type="json">
<param name="includeProperties"> //定义返回的参数
^subCategoryDictList\[\d+\]\.id,
^subCategoryDictList\[\d+\]\.name
</param>
</result>
</action>
复制代码 代码如下:
<select id="select" name="rawfoodBasic.category" onchange="doChange(this.value);">
//第一个下拉框里的值
</select>
第二个下拉框:
复制代码 代码如下:
<select id="subSelect" name="rawfoodBasic.absorb" onchange="javascript:alert(this.value);" > //要3及菜单还可以在次写相应的时间
<option value="0">--请选择二级菜单-- </option>
</select>
js代码:
复制代码 代码如下:
<script type="text/javascript">
$.ajaxSetup({
cache:false
}); //清除ajax中之前的值
function doChange(obj){
var url = '<c:url value="/nutrition/getSubDictDataToJsonByCategory.action"/>'+"?rawfood.category="+obj;//第一个下拉框选中后进入的action,action中给第二个下拉框所需的值赋值
$.getJSON(url,function(json){
var seleOjb=document.getElementById("subSelect");
for(var k=0;k<seleOjb.options.length;k++){
seleOjb.options.remove(k); //当再选中第一个下拉框中的值时,把第二个下拉框中原来的值清除
}
$.each(json.subCategoryDictList,function(index,subDictData){
var optionj=document.createElement("option"); //为第二个下拉框赋值
optionj.value = subDictData.id;
//alert(subDictData.id);
optionj.text=subDictData.name;
seleOjb.add(optionj);
});
});
}
</script>
复制代码 代码如下:
<action name="getSubDictDataToJsonByCategory" class="rawfoodAction" method="getSubDictDataToJsonByCategory">
<result name="success" type="json">
<param name="includeProperties"> //定义返回的参数
^subCategoryDictList\[\d+\]\.id,
^subCategoryDictList\[\d+\]\.name
</param>
</result>
</action>
相关文章
你可能已经从这篇文章的标题中猜到了，Internet Explorer 8（目前是Beta2）提供了原生JSON的解析和序列化。2009-04-04
json一些实例定义2008-06-06
Json 凭借其自身的优势，在Web数据处理方面已经占据了一定的位置，这段时间涉及到用Json做为数据传输格式的项目有3个，其中有部分页面就采用了Json 数据传输格式, 这里我总结下这段时间采用这种方式的一些问题总结2011-12-12
今天小编就为大家分享一篇json数据传到前台并解析展示成列表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。2008-06-06
使用Json比用string返回数据更友好，也更面向对象一些
在面向对象的程序来讲，它的可能性，编写代码不易出错率也很重要，所以，建议在返回复杂字条符时，使用C#提供的Json，而不需要自己去拼写JS返回的Json格式。2011-09-09
最近在工作中开发一个内部功能时碰到的一个需求，要把json数据在页面上展示出来，平时浏览器会安装jsonView这样的扩展来看json数据，但是程序要用到的话该怎么办呢？今天在网上搜索的时候，发现了这个小技巧，分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧2016-11-11
本文主要向大家介绍了个人对于jsonp的理解，jsonp的概念，跨域问题，以及jsonp与XMLHttpRequest的区别，由于本人也是javascript的初学者，难免会有些不当之处，还请指正，谢谢。2015-03-03
这篇文章主要介绍了js实现删除json中指定的元素,需要的朋友可以参考下2020-09-09
Jquery+asp.net后台数据传到前台js进行解析的方法
我们经常用jquery读取后台数据，后台返回数据。后台数据格式就有很多了，但是js里面没有什么类型之分2014-05-05
最新评论