jQuery ajax 多级联动 下拉框 Demo

发布时间:2017-09-03 13:06:59
jQuery ajax 多级联动 下拉框 Demo

<h2> 省级联动</h2> <div class="city" > <select id="SelProvince" class="select"></select> <select id="SelCity" class="select"></select> <select id="SelArea" class="select"></select> <select id="SelXian" class="select"></select> </div> <h2> 市区联动</h2> <div class="city" > <select id="Select1" class="select"></select> <select id="Select2" class="select"></select> <select id="Select3" class="select"></select> </div>

js 绑定

引入jQuery 和 jquery.cascadeselect.js 两个文件(下面会贴出文件下载地址)

<script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: 'Name', // 绑定下拉框显示值的字段 casTopId: 0, // 顶级节点ParentId casCount: 4, // 级联个数 casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 级联下拉框id casDefVal: ['全国', 5, '益阳', 22], // 级联默认值(Id,Name都可以) }); $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: 'Name', // 绑定下拉框显示值的字段 casTopId: 1, // 顶级节点ParentId casCount: 3, // 级联个数 casObjId: ['Select1', 'Select2', 'Select3'], // 级联下拉框id casDefVal: [5, '益阳', 22], // 级联默认值(Id,Name都可以) }); }); </script>

往后传递的参数:

Level 级联级别 1开始

ParentID 父级ID

后台页面两种情况:

1、省市区是一个表(表结构是Id,Name,ParentId) 自联接查询的话,后台页面根据ParentId查询数据即可

2、省市区在不同的表,可一个更具 Level 级联级别分别查询数据,但是省市区返回数据实体得一样,也就是列名得一致

返回数据的格式:[{"Id":value,"Name":value},{"Id":value,"Name":value}]

绑定的时候可以设置这两个字段值:(idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: 'Name', // 绑定下拉框显示值的字段)

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄石网站制作 http://huangshi.666rj.com