简单实用jquery版三级联动select示例

  html和js部分

  

复制代码 代码如下:

  <!DOCTYPE html>

  <html>

  <head>

  <meta charset=gbk />

  <title>selectList</title>

  <style type="text/css">

  *{margin:0;padding:0;}

  .selectList{width:200px;margin:50px auto;}

  </style>

  <script type="text/javascript" src="jquery1.7.1.js"></script>

  </head>

  <body>

  <div class="selectList">

  <select class="province">

  <option>请选择</option>

  </select>

  <select class="city">

  <option>请选择</option>

  </select>

  <select class="district">

  <option>请选择</option>

  </select>

  </div>

  <div class="selectList">

  <select class="province">

  <option>请选择</option>

  </select>

  <select class="city">

  <option>请选择</option>

  </select>

  <select class="district">

  <option>请选择</option>

  </select>

  </div>

  <script type="text/javascript">

  $(function(){

  $(".selectList").each(function(){

  var url = "area.json";

  var areaJson;

  var temp_html;

  var oProvince = $(this).find(".province");

  var oCity = $(this).find(".city");

  var oDistrict = $(this).find(".district");

  //初始化省

  var province = function(){

  $.each(areaJson,function(i,province){

  temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";

  });

  oProvince.html(temp_html);

  city();

  };

  //赋值市

  var city = function(){

  temp_html = "";

  var n = oProvince.get(0).selectedIndex;

  $.each(areaJson[n].c,function(i,city){

  temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";

  });

  oCity.html(temp_html);

  district();

  };

  //赋值县

  var district = function(){

  temp_html = "";

  var m = oProvince.get(0).selectedIndex;

  var n = oCity.get(0).selectedIndex;

  if(typeof(areaJson[m].c[n].d) == "undefined"){

  oDistrict.css("display","none");

  }else{

  oDistrict.css("display","inline");

  $.each(areaJson[m].c[n].d,function(i,district){

  temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";

  });

  oDistrict.html(temp_html);

  };

  };

  //选择省改变市

  oProvince.change(function(){

  city();

  });

  //选择市改变县

  oCity.change(function(){

  district();

  });

  //获取json数据

  $.getJSON(url,function(data){

  areaJson = data;

  province();

  });

  });

  });

  </script>

  </body>

  </html>

  json文件(area.json),这里只是事例,根据情况添加或编写

  

复制代码 代码如下:

  [

  {"p":"江西省",

  "c":[

  {"ct":"南昌市",

  "d":[

  {"dt":"西湖区"},

  {"dt":"东湖区"},

  {"dt":"高新区"}

  ]},

  {"ct":"赣州市",

  "d":[

  {"dt":"瑞金县"},

  {"dt":"南丰县"},

  {"dt":"全南县"}

  ]}

  ]},

  {"p":"北京",

  "c":[

  {"ct":"东城区"},

  {"ct":"西城区"}

  ]},

  {"p":"河北省",

  "c":[

  {"ct":"石家庄",

  "d":[

  {"dt":"长安区"},

  {"dt":"桥东区"},

  {"dt":"桥西区"}

  ]},

  {"ct":"唐山市",

  "d":[

  {"dt":"滦南县"},

  {"dt":"乐亭县"},

  {"dt":"迁西县"}

  ]}

  ]}

  ]

  各位最好自己封装成插件,方便调用