1. 程式人生 > >JQuery Ajax三級聯動地區下拉框

JQuery Ajax三級聯動地區下拉框

JSP部分程式碼
 
  
 
 <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>
 <script>
  //為了避免jquery中的'$'與其它的'$'衝突,在此將jquery中的'$'重新命名為'jQuery'
  var jQuery=$;
 </script>
 
 
  
 
 <script>
 
 
   //初始化資料
   jQuery(document).ready(function(){
  
    getProvince();
 
  });
  
 
  
   
   //取所有省份
   function getProvince(){
 
    //&callback=?"注意這個是為了解決跨域訪問的問題   
    var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId=0&callback=?";
    
    jQuery.getJSON(url,null,function call(result){   
          setProvince(result); 
      });
    
    //顯示或隱藏啟用卡
    jQuery("#actionCardChk").click(function(){
     if(jQuery("#actionCardChk").attr("checked")==true){
      jQuery("#actionCardDiv").show();
     }else{
      jQuery("#actionCardDiv").hide();
     }
    });
    
    //顯示或隱藏新增常用地址
    jQuery("#addressChk").click(function(){
     if(jQuery("#addressChk").attr("checked")==true){
      jQuery("#addressDiv").show();
     }else{
      jQuery("#addressDiv").hide();
     }
    });
    
    
   }
   
   
   
   
   //設定省份
   function setProvince(result){
   
   var province = document.getElementById("toProvince");
   
   jQuery.each(result.data, function(i, area){
          var value = area.id;
     var text = area.name;
     var option = new Option(text,value);
     province.options.add(option);
           
     });  
   
   }
   
   
   //按上級ID取子地區
   function getArea(name){
    
    if( name=='city' ){
     clearSel(document.getElementById("toCity")); //清空城市
     var province = document.getElementById("toProvince");
     if(province.options[province.selectedIndex].value == "") return;
     var areaId = province.options[province.selectedIndex].value;
     
     var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?";
     jQuery.getJSON(url,null,function call(result){   
           setCity(result); 
       });
      
    }else if( name=='county'){
     clearSel(document.getElementById("toCounty")); //清空城區
     var city = document.getElementById("toCity");
     if(city.options[city.selectedIndex].value == "") return;
     var areaId = city.options[city.selectedIndex].value;
     
     var url ="http://www.yimei.com/shopcar/getAreaJSON?areaId="+areaId+"&callback=?";
     jQuery.getJSON(url,null,function call(result){   
           setCounty(result); 
       });
       
    }
   }
   
   //當改變省份時設定城市
   function setCity(result){
   
   var city = document.getElementById("toCity");
   
   jQuery.each(result.data, function(i, area){
          var value = area.id;
     var text = area.name;
     var option = new Option(text,value);
     city.options.add(option);
     });  
     
   }
   
   
   //當改變省份時設定城市
   function setCounty(result){
  
   var county = document.getElementById("toCounty");
   
   jQuery.each(result.data, function(i, area){
          var value = area.id;
     var text = area.name;
     var option = new Option(text,value);
     county.options.add(option);
     });  
    
   }
   
   // 清空下拉列表
   function clearSel(oSelect){
      
   while(oSelect.childNodes.length>0){
    oSelect.removeChild(oSelect.childNodes[0]);
   }
          
   }
 
  
 
 </script>
 
  
 
   <tr>
   <td height="28" colspan="3"> 
    <select name="toProvince" id="toProvince" onChange="getArea('city')" class="STYLE5" onFocus="doOnFocus(this);">
     <option value="" selected>請選擇省份...</option>
    </select>         
   </td> 
          </tr>
 
          <tr>
   <td height="28" colspan="3">               
    <select name="toCity" id="toCity" class="board" onChange="getArea('county')" onFocus="doOnFocus(this);">
     <option value="">請選擇城市...</option>
    </select>        
   </td>
                 
          </tr>
          
          <tr>
   <td class="STYLE3">
    <select name="toCounty" id="toCounty" class="board"  onfocus="doOnFocus(this);">
     <option value="">請選擇城區...</option>
    </select>        
   </td>
  </tr>
 
  
 
  
 
 JAVA部分程式碼 Servlet
 
  
 
  response.setContentType("text/xml;charset=utf-8");
   response.setHeader("Pragma","No-cache");
   response.setDateHeader("Expires",0);
   response.setHeader("Cache-Control","no-cache");    
   PrintWriter out=response.getWriter();
 
   String areaId = request.getParameter("areaId");
   
   if(areaId==null || areaId.trim().length()<=0){
    //sb.append("<data><error>系統錯誤地區id為空</error></data>");
    //out.print(sb.toString());
    return;
   }  
   
 
   //注意這個是為了解決跨域訪問的問題
   String callback = request.getParameter("callback");   
   
   try {
 
    List areaList = AreaService.getInstance().getAreasByParentId(Integer.parseInt(areaId));
 
    // 取集合
    JSONArray jsonArray = JSONArray.fromObject(areaList);
 
    JSONObject jsobjcet = new JSONObject();
 
    jsobjcet.put("data", jsonArray);
    
    response.getWriter().write(callback+"("+jsobjcet.toString()+");");
 
    log.info(callback+"("+jsobjcet.toString()+");");
    
    
   } catch (IOException e) {
    e.printStackTrace();
   }
      
 
  
 
 DAO部分程式碼
 
 public List getAreasByParentId(int parentId) {
   Connection conn=null;
   Statement stm=null;
   ResultSet rs=null;
   List<AreaInfo> list = new ArrayList<AreaInfo>();
   try{
    conn = ConnectionPool.getConnection();
    if( conn == null ) throw new Exception("DataBase connection error");
    stm = conn.createStatement();
    String sql ="select * from n_area where parent_id =" + parentId;
    rs = stm.executeQuery(sql);
    AreaInfo areaInfo = null;
    while( rs.next() ) {
     areaInfo= new AreaInfo();
     areaInfo.setId(rs.getInt("id"));
     areaInfo.setName(rs.getString("name"));
     areaInfo.setParentId(rs.getInt("parent_id"));
     list.add(areaInfo);
    }
   }catch(Exception e){
    log.error("getAreasByParentId() error:"+e.getMessage());
   }finally{
    ConnectionPool.release(conn,stm,rs); //釋放資源
   }
   return list;
  }
 
  
 
  
 
 資料表結構
 
 CREATE TABLE `n_area` (
   `id` int(11) NOT NULL auto_increment,
   `name` varchar(20) default NULL,
   `parent_id` int(11) NOT NULL default '0',
   PRIMARY KEY  (`id`)
 ) ENGINE=MyISAM AUTO_INCREMENT=224 DEFAULT CHARSET=gbk;
 
 記錄
 
  
 
 INSERT INTO `n_area` VALUES ('1', '廣東省', '0');
 INSERT INTO `n_area` VALUES ('2', '北京', '0');
 INSERT INTO `n_area` VALUES ('3', '深圳市', '1');
 INSERT INTO `n_area` VALUES ('4', '廣州市', '1');
 INSERT INTO `n_area` VALUES ('5', '北京五環以內', '2');
 INSERT INTO `n_area` VALUES ('6', '天津', '0');
 INSERT INTO `n_area` VALUES ('7', '天津市', '6');
 INSERT INTO `n_area` VALUES ('14', '珠海市', '1');
 INSERT INTO `n_area` VALUES ('15', '汕頭市', '1');
 INSERT INTO `n_area` VALUES ('16', '佛山市', '1');
 INSERT INTO `n_area` VALUES ('17', '東莞市', '1');
 INSERT INTO `n_area` VALUES ('22', '肇慶市', '1');
 INSERT INTO `n_area` VALUES ('23', '惠州市', '1');
 INSERT INTO `n_area` VALUES ('24', '清遠市', '1');
 INSERT INTO `n_area` VALUES ('25', '韶關市', '1');
 INSERT INTO `n_area` VALUES ('26', '湛江市', '1');
 INSERT INTO `n_area` VALUES ('27', '潮州市', '1');
 INSERT INTO `n_area` VALUES ('28', '梅州市', '1');
 INSERT INTO `n_area` VALUES ('29', '茂名市', '1');
 INSERT INTO `n_area` VALUES ('30', '浙江省', '0');
 INSERT INTO `n_area` VALUES ('31', '江蘇省', '0');
 INSERT INTO `n_area` VALUES ('32', '福建省', '0');
 INSERT INTO `n_area` VALUES ('33', '廣西省', '0');
 INSERT INTO `n_area` VALUES ('34', '江西省', '0');
 INSERT INTO `n_area` VALUES ('35', '山東省', '0');
 INSERT INTO `n_area` VALUES ('36', '湖南省', '0');
 INSERT INTO `n_area` VALUES ('37', '安徽省', '0');
 INSERT INTO `n_area` VALUES ('38', '貴州省', '0');
 INSERT INTO `n_area` VALUES ('39', '黑龍江省', '0');
 INSERT INTO `n_area` VALUES ('40', '遼寧省', '0');
 INSERT INTO `n_area` VALUES ('41', '四川省', '0');
 INSERT INTO `n_area` VALUES ('42', '湖北省', '0');
 INSERT INTO `n_area` VALUES ('43', '陝西省', '0');
 INSERT INTO `n_area` VALUES ('44', '河南省', '0');
 INSERT INTO `n_area` VALUES ('45', '山西省', '0');
 INSERT INTO `n_area` VALUES ('46', '海南省', '0');
 INSERT INTO `n_area` VALUES ('47', '杭州市', '30');
 INSERT INTO `n_area` VALUES ('48', '溫州市', '30');
 INSERT INTO `n_area` VALUES ('49', '寧波市', '30');
 INSERT INTO `n_area` VALUES ('50', '台州市', '30');
 INSERT INTO `n_area` VALUES ('51', '南京市', '31');
 INSERT INTO `n_area` VALUES ('52', '無錫市', '31');
 INSERT INTO `n_area` VALUES ('53', '蘇州市', '31');
 INSERT INTO `n_area` VALUES ('54', '常州市', '31');
 INSERT INTO `n_area` VALUES ('55', '徐州市', '31');
 INSERT INTO `n_area` VALUES ('56', '福州市', '32');
 INSERT INTO `n_area` VALUES ('57', '廈門市', '32');
 INSERT INTO `n_area` VALUES ('58', '泉州市', '32');
 INSERT INTO `n_area` VALUES ('59', '漳州市', '32');
 INSERT INTO `n_area` VALUES ('60', '南寧市', '33');
 INSERT INTO `n_area` VALUES ('61', '桂林市', '33');
 INSERT INTO `n_area` VALUES ('62', '柳州市', '33');
 INSERT INTO `n_area` VALUES ('63', '百色市', '33');
 INSERT INTO `n_area` VALUES ('64', '南昌市', '34');
 INSERT INTO `n_area` VALUES ('65', '贛州市', '34');
 INSERT INTO `n_area` VALUES ('66', '濟南市', '35');
 INSERT INTO `n_area` VALUES ('67', '青島市', '35');
 INSERT INTO `n_area` VALUES ('68', '長沙市', '36');
 INSERT INTO `n_area` VALUES ('69', '合肥市', '37');
 INSERT INTO `n_area` VALUES ('70', '貴陽市', '38');
 INSERT INTO `n_area` VALUES ('71', '哈爾濱市', '39');
 INSERT INTO `n_area` VALUES ('72', '大連市', '40');
 INSERT INTO `n_area` VALUES ('73', '成都市', '41');
 INSERT INTO `n_area` VALUES ('74', '武漢市', '42');
 INSERT INTO `n_area` VALUES ('75', '西安市', '43');
 INSERT INTO `n_area` VALUES ('76', '鄭州市', '44');
 INSERT INTO `n_area` VALUES ('77', '太原市', '45');
 INSERT INTO `n_area` VALUES ('78', '海口市', '46');
 INSERT INTO `n_area` VALUES ('79', '中山市', '1');
 INSERT INTO `n_area` VALUES ('80', '順德市', '1');
 INSERT INTO `n_area` VALUES ('81', '江門市', '1');
 INSERT INTO `n_area` VALUES ('82', '雲浮市', '1');
 INSERT INTO `n_area` VALUES ('83', '陽江市', '1');
 INSERT INTO `n_area` VALUES ('84', '揭陽市', '1');
 INSERT INTO `n_area` VALUES ('85', '河源市', '1');
 INSERT INTO `n_area` VALUES ('86', '重慶', '0');
 INSERT INTO `n_area` VALUES ('87', '重慶市區', '86');
 INSERT INTO `n_area` VALUES ('88', '上海', '0');
 INSERT INTO `n_area` VALUES ('89', '上海市', '88');
 INSERT INTO `n_area` VALUES ('91', '北京五環以外', '2');
 INSERT INTO `n_area` VALUES ('93', '重慶郊區', '86');
 INSERT INTO `n_area` VALUES ('94', '河北省', '0');
 INSERT INTO `n_area` VALUES ('95', '石家莊市', '94');
 INSERT INTO `n_area` VALUES ('96', '保定市', '94');
 INSERT INTO `n_area` VALUES ('97', '邯鄲市', '94');
 INSERT INTO `n_area` VALUES ('98', '張家口市', '94');
 INSERT INTO `n_area` VALUES ('99', '秦皇島市', '94');
 INSERT INTO `n_area` VALUES ('100', '邢臺市', '94');
 INSERT INTO `n_area` VALUES ('101', '唐山市', '94');
 INSERT INTO `n_area` VALUES ('102', '承德市', '94');
 INSERT INTO `n_area` VALUES ('103', '鎮江市', '31');
 INSERT INTO `n_area` VALUES ('104', '紹興市', '30');
 INSERT INTO `n_area` VALUES ('105', '嘉興市', '30');
 INSERT INTO `n_area` VALUES ('106', '南通市', '31');
 INSERT INTO `n_area` VALUES ('107', '揚州市', '31');
 INSERT INTO `n_area` VALUES ('108', '連雲港市', '31');
 INSERT INTO `n_area` VALUES ('109', '北海市', '33');
 INSERT INTO `n_area` VALUES ('110', '九江市', '34');
 INSERT INTO `n_area` VALUES ('111', '景德鎮市', '34');
 INSERT INTO `n_area` VALUES ('112', '淄博市', '35');
 INSERT INTO `n_area` VALUES ('113', '煙臺市', '35');
 INSERT INTO `n_area` VALUES ('114', '濰坊市', '35');
 INSERT INTO `n_area` VALUES ('115', '威海市', '35');
 INSERT INTO `n_area` VALUES ('116', '岳陽市', '36');
 INSERT INTO `n_area` VALUES ('117', '湘潭市', '36');
 INSERT INTO `n_area` VALUES ('118', '株洲市', '36');
 INSERT INTO `n_area` VALUES ('119', '衡陽市', '36');
 INSERT INTO `n_area` VALUES ('120', '常德市', '36');
 INSERT INTO `n_area` VALUES ('121', '滁州市', '37');
 INSERT INTO `n_area` VALUES ('123', '安慶市', '37');
 INSERT INTO `n_area` VALUES ('124', '遵義市', '38');
 INSERT INTO `n_area` VALUES ('125', '安順市', '38');
 INSERT INTO `n_area` VALUES ('126', '六盤水市', '38');
 INSERT INTO `n_area` VALUES ('127', '瀋陽市', '40');
 INSERT INTO `n_area` VALUES ('128', '鞍山市', '40');
 INSERT INTO `n_area` VALUES ('129', '攀枝花市', '41');
 INSERT INTO `n_area` VALUES ('130', '南充市', '41');
 INSERT INTO `n_area` VALUES ('131', '襄樊市', '42');
 INSERT INTO `n_area` VALUES ('132', '黃石市', '42');
 INSERT INTO `n_area` VALUES ('133', '漢中市', '43');
 INSERT INTO `n_area` VALUES ('134', '洛陽市', '44');
 INSERT INTO `n_area` VALUES ('135', '開封市', '44');
 INSERT INTO `n_area` VALUES ('136', '雲南省', '0');
 INSERT INTO `n_area` VALUES ('137', '昆明市', '136');
 INSERT INTO `n_area` VALUES ('138', '麗江市', '136');
 INSERT INTO `n_area` VALUES ('139', '蚌埠市', '37');
 INSERT INTO `n_area` VALUES ('140', '南山區', '3');
 INSERT INTO `n_area` VALUES ('141', '其它區', '3');
 INSERT INTO `n_area` VALUES ('143', '市北區', '67');
 INSERT INTO `n_area` VALUES ('213', '西藏', '0');
 INSERT INTO `n_area` VALUES ('178', '甘肅省', '0');
 INSERT INTO `n_area` VALUES ('179', '蘭州市', '178');
 INSERT INTO `n_area` VALUES ('180', '內蒙古', '0');
 INSERT INTO `n_area` VALUES ('181', '呼和浩特', '180');
 INSERT INTO `n_area` VALUES ('182', '吉林省', '0');
 INSERT INTO `n_area` VALUES ('183', '新疆省', '0');
 INSERT INTO `n_area` VALUES ('184', '新疆', '183');
 INSERT INTO `n_area` VALUES ('185', '吉林市', '182');
 INSERT INTO `n_area` VALUES ('215', '其他地區', '213');
 INSERT INTO `n_area` VALUES ('187', '其他地區', '1');
 INSERT INTO `n_area` VALUES ('188', '其他地區', '30');
 INSERT INTO `n_area` VALUES ('189', '其他地區', '31');
 INSERT INTO `n_area` VALUES ('190', '其他地區', '32');
 INSERT INTO `n_area` VALUES ('191', '其他地區', '33');
 INSERT INTO `n_area` VALUES ('192', '其他地區', '34');
 INSERT INTO `n_area` VALUES ('193', '其他地區', '35');
 INSERT INTO `n_area` VALUES ('194', '其他地區', '36');
 INSERT INTO `n_area` VALUES ('195', '其他地區', '37');
 INSERT INTO `n_area` VALUES ('196', '其他地區', '38');
 INSERT INTO `n_area` VALUES ('197', '其他地區', '39');
 INSERT INTO `n_area` VALUES ('198', '其他地區', '40');
 INSERT INTO `n_area` VALUES ('199', '其他地區', '41');
 INSERT INTO `n_area` VALUES ('200', '其他地區', '42');
 INSERT INTO `n_area` VALUES ('201', '其他地區', '43');
 INSERT INTO `n_area` VALUES ('202', '其他地區', '44');
 INSERT INTO `n_area` VALUES ('203', '其他地區', '94');
 INSERT INTO `n_area` VALUES ('204', '其他地區', '136');
 INSERT INTO `n_area` VALUES ('205', '其他地區', '178');
 INSERT INTO `n_area` VALUES ('206', '其他地區', '180');
 INSERT INTO `n_area` VALUES ('207', '其他地區', '182');
 INSERT INTO `n_area` VALUES ('214', '拉薩', '213');
 INSERT INTO `n_area` VALUES ('210', '其他地區', '45');
 INSERT INTO `n_area` VALUES ('211', '其他地區', '46');
 INSERT INTO `n_area` VALUES ('212', '其他地區', '86');
 INSERT INTO `n_area` VALUES ('220', '新三區', '184');
 INSERT INTO `n_area` VALUES ('219', '新二區', '184');
 INSERT INTO `n_area` VALUES ('221', '天河區', '4');
 INSERT INTO `n_area` VALUES ('222', '越秀區', '4');
 INSERT INTO `n_area` VALUES ('223', '海珠區', '4');
 
  
 
  
 
 附件中有相應的jar包
 
 json-lib-2.1-jdk15.jar 是主要的

相關推薦

JQuery Ajax三級聯動地區

JSP部分程式碼         <script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>  <script>   //為了避免jquery中的'$'與其

jquery省份城市聯動選擇

<script type="text/javascript" src="__PUBLIC__/Medidata/js/jquery-1.8.3.min.js"></script> <script> var pro = ["北京","天津","上海","重慶",

省市區三級聯動select資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

側滑選單+三級聯動搜尋

//側滑選單 mDrawerLayout = (DrawerLayout) findViewById(R.id.professional_layout); mDrawerLayout.openDrawer(Gravity.RIGHT);//開啟側滑選單 spinnerProfessional = (Sp

Ajax提高篇(7)Ajax實現簡單的聯動顯示資料

頁面中的兩個下拉列表框:<tr> <td style="width: 130px"> 所在學院:</td> <td styl

JavaScript Ajax Json實現上下級聯動效果例項程式碼

最近嘗試做出一個部門和人員的下拉框聯動功能,部門和人員的對應關係是1:N  程式碼如下: <div class="forntName">部門</div>  <div class="inpBox">  <select  name="d

ajax 遍歷select

bsp erro string rip sig not context () cati html :<select id="type" > </select> js代碼: <script type="text/javascript">

使用ajax動態載入select

本例子只是模擬一個動態獲取select值的過程,資料從xml獲取,當然你也可以從servlet、struts的action獲取,不多說看程式碼 1、student.xml <?xml version="1.0" encoding="UTF-8"?> <stu

jQuery實戰5:級聯效果

今天來完成jQuery實戰的級聯下拉框的效果。效果功能如下: 頁面預設只提供汽車廠商,當選擇了具體的某品牌汽車,汽車型別下拉框就會動態的顯示出來,選擇對應的型別,然後出來該汽車型別對應的輪胎型別下拉框顯示出來,選中輪胎型別,頁面的正中間會顯示出汽車的圖

Ajax 實現級聯

級聯下拉框隨處可見,最常見的就是省市的級聯,在選擇省份後,對應的區縣的下拉選擇列表的下拉選擇內容也會發生相應改變,即所謂的級聯下拉框。這種頁面非同步重新整理,無可厚非,AJax是首選。 在做一個管理系統時,有這樣一個需求,在選擇了倉庫後,對應的倉位下拉選擇框的內容也需要改變

jquery+ajax實現多個選之間的關聯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

ajax 載入資料到

html:             <select class="form-control" id="cRoleName" name="cRoleName">             </select> js: $.ajax({          

jquery 獲取和設定 select的值

$("#select_id").append("<option value='Value'>Text</option>"); //新增一項option $("#select_id").prepend("<option value='0'>請選擇</option&

js和jQuery以及easyui實現對的指定賦值

js實現: 1. 通過讓第i個option為selected實現選中第i個,程式碼如下:(id為下拉框id) (1)  document.getElementById("id").options[i].selected=true; (2)document.getElemen

ajax實現百度

使用Ajax實現此效果1.準備資料的serlvetpublic class SelectServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, Http

jquery實現動態載入select

如題,直接上程式碼,實戰學習。 <head><title>jquery實現動態載入select下拉選項</title> <script type="text/javascript"> function init(){ m

使用AjaxJquery配合資料庫實現的二級聯動

首先我們需要先建立好資料庫,將一些資料插入進去 需要兩張表: province:省份表 city :          城市表 如圖: 然後再在java中建立相關的實體類與之對應 再然後,我們就能開始做jdbc的操作了 public class ConnectionFa

初學ajax,實現使用者名稱重複提示、二級/三級聯動

初學ajax,實現非同步操作!                 以下為三級聯動下拉框部分程式碼 jsp頁面部分程式碼 <table> <tr> <th>下拉框:</th> &l

原生的三級聯動

for .org char endif cti ima nal height local 最近在工作中遇到了一個需要三級聯動的功能,之前也只用到過地區聯動的三級菜單,還是用的插件,這次就不沒那麽好了,沒辦法,自己寫咯,我下面的寫出來的是原生的;寫的不好,不要噴我 一共有三個

使用jquery Ajax異步刷新

pre htm 引入 log mar script items ppa pty 一個下拉框 <label>產品類型:</label> <select id="protype" name="protype" onchange="