jQuery ajax 多级联动 下拉框 Demo

页面导航:首页 > 网络编程 > JavaScript > jQuery ajax 多级联动 下拉框 Demo

jQuery ajax 多级联动 下拉框 Demo

来源: 作者: 时间:2016-01-19 18:32 【

HTML 代码h2 省级联动 h2div class=city select id=SelProvince class=select select select id=SelCity class=select select
HTML 代码
 
 
<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', // 绑定下拉框显示值的字段) 
 
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<