<select>简易的二级联动

1.首先是表单页面：

 <tr>
     <td align="right">
         <label class="Validform_label">
             所在区县:
         </label>
     </td>
     <td class="value">
         <select id="atcounty" name="atcounty" style="width: 150px" onchange="getDistrict(this)">
             </select>
             <span class="Validform_checktip"></span>
             <label class="Validform_label" style="display: none;">所在区县</label>
         </td>
     </tr>
 <tr>
     <td align="right">
         <label class="Validform_label">
             所在街道:
         </label>
     </td>
     <td class="value">
             <select id="atdistrict" name="atdistrict" style="width: 150px">
             </select>
             <span class="Validform_checktip"></span>
             <label class="Validform_label" style="display: none;">所在街道</label>
         </td>
 <tr>

2.js代码：

   <script type="text/javascript">
     //编写自定义JS代码
       $(document).ready(function(){
           getCountry();
           $("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
       });
        function getCountry(){
           $.ajax({
             type: 'post',
             url : 'hAqscTieupsummaryController.do?getBJCountry',
             async: true,
             dataType: "json",
             success: function(data) {
                 for(var key in data){
                     if (key==0) {
                         $("#atcounty").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
                         $("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
                     }else{
                         $("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
                     }
                 }
             }
           });
        }
       function getDistrict(obj){
           $("#atdistrict").empty();    //清空二级下拉框，否则会叠加
           $("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
           var id = obj.id;
           var options=$("#"+id+" option:selected"); //获取选中的项
           alert(options.text()); //拿到选中项的值
           var countrycode = options.val();
           alert(countrycode);
           $.ajax({
               type:"post",
               url:'hAqscTieupsummaryController.do?getStreet',
               dataType:'json',
               data:{countrycode:countrycode},
               success:function(data){
                   for(var key in data){
                     if (key==0) {
                         //$("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
                         $("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
                     }else{
                         $("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
                     }
                 }
               }
           });
       }
   </script>

3.java后台代码(SpringMvc)：

     /**
      * 区县
      * @param request
      * @return
      */
     @RequestMapping(params="getBJCountry")
     @ResponseBody
     public List<BjcountryEntity> getBJCountry(HttpServletRequest request){
         List<BjcountryEntity> countrys = dao.getCountry();
         return countrys;
     }
     /**
      * 街道
      * @param request
      * @return
      */
     @RequestMapping(params="getStreet")
     @ResponseBody
     public List<BjcountryEntity> getStreet(HttpServletRequest request){
         String id = request.getParameter("countrycode");
         if (id!="") {
             String code = id.substring(0, 6);
             String sql = "from BjcountryEntity t0 where countrycode not like '110%000000' and countrycode like '"+code+"%' order by ordercode";
             @SuppressWarnings("unchecked")
             List<BjcountryEntity> streets = comDao.findHql(sql);
             return streets;
         }
         return null;
     }

4.entity实体类：

 package com.towery.thermal.tieup.entity;

 import java.math.BigDecimal;
 import java.util.Date;
 import java.lang.String;
 import java.lang.Double;
 import java.lang.Integer;
 import java.math.BigDecimal;
 import javax.xml.soap.Text;
 import java.sql.Blob;
 import javax.persistence.Column;
 import javax.persistence.Entity;
 import javax.persistence.GeneratedValue;
 import javax.persistence.GenerationType;
 import javax.persistence.Id;
 import javax.persistence.Table;
 import org.hibernate.annotations.GenericGenerator;
 import javax.persistence.SequenceGenerator;
 import org.jeecgframework.poi.excel.annotation.Excel;

 /**
  * @Title: Entity
  * @Description: 曲线表
  * @author onlineGenerator
  * @date 2018-01-16 12:52:46
  * @version V1.0
  *
  */
 @Entity
 @Table(name = "BJCountry", schema = "")
 @SuppressWarnings("serial")
 public class BjcountryEntity implements java.io.Serializable {
     /**主键*/
     private java.lang.String id;
     /**创建人名称*/
     private java.lang.String createName;
     /**创建人登录名称*/
     private java.lang.String createBy;
     /**创建日期*/
     private java.util.Date createDate;
     /**更新人名称*/
     private java.lang.String updateName;
     /**更新人登录名称*/
     private java.lang.String updateBy;
     /**更新日期*/
     private java.util.Date updateDate;
     /**所属部门*/
     private java.lang.String sysOrgCode;
     /**所属公司*/
     private java.lang.String sysCompanyCode;
     /**流程状态*/
     private java.lang.String bpmStatus;
     /**区县名称*/
     @Excel(name="区县名称")
     private java.lang.String countryname;
     /**区县编码*/
     @Excel(name="区县编码")
     private java.lang.String countrycode;
     /**排序字段*/
     @Excel(name="排序字段")
     private java.lang.String ordercode;

     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  主键
      */
     @Id
     @GeneratedValue(generator = "paymentableGenerator")
     @GenericGenerator(name = "paymentableGenerator", strategy = "uuid")
     @Column(name ="ID",nullable=false,length=36)
     public java.lang.String getId(){
         return this.id;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  主键
      */
     public void setId(java.lang.String id){
         this.id = id;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  创建人名称
      */
     @Column(name ="CREATE_NAME",nullable=true,length=50)
     public java.lang.String getCreateName(){
         return this.createName;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  创建人名称
      */
     public void setCreateName(java.lang.String createName){
         this.createName = createName;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  创建人登录名称
      */
     @Column(name ="CREATE_BY",nullable=true,length=50)
     public java.lang.String getCreateBy(){
         return this.createBy;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  创建人登录名称
      */
     public void setCreateBy(java.lang.String createBy){
         this.createBy = createBy;
     }
     /**
      *方法: 取得java.util.Date
      *@return: java.util.Date  创建日期
      */
     @Column(name ="CREATE_DATE",nullable=true,length=20)
     public java.util.Date getCreateDate(){
         return this.createDate;
     }

     /**
      *方法: 设置java.util.Date
      *@param: java.util.Date  创建日期
      */
     public void setCreateDate(java.util.Date createDate){
         this.createDate = createDate;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  更新人名称
      */
     @Column(name ="UPDATE_NAME",nullable=true,length=50)
     public java.lang.String getUpdateName(){
         return this.updateName;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  更新人名称
      */
     public void setUpdateName(java.lang.String updateName){
         this.updateName = updateName;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  更新人登录名称
      */
     @Column(name ="UPDATE_BY",nullable=true,length=50)
     public java.lang.String getUpdateBy(){
         return this.updateBy;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  更新人登录名称
      */
     public void setUpdateBy(java.lang.String updateBy){
         this.updateBy = updateBy;
     }
     /**
      *方法: 取得java.util.Date
      *@return: java.util.Date  更新日期
      */
     @Column(name ="UPDATE_DATE",nullable=true,length=20)
     public java.util.Date getUpdateDate(){
         return this.updateDate;
     }

     /**
      *方法: 设置java.util.Date
      *@param: java.util.Date  更新日期
      */
     public void setUpdateDate(java.util.Date updateDate){
         this.updateDate = updateDate;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  所属部门
      */
     @Column(name ="SYS_ORG_CODE",nullable=true,length=50)
     public java.lang.String getSysOrgCode(){
         return this.sysOrgCode;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  所属部门
      */
     public void setSysOrgCode(java.lang.String sysOrgCode){
         this.sysOrgCode = sysOrgCode;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  所属公司
      */
     @Column(name ="SYS_COMPANY_CODE",nullable=true,length=50)
     public java.lang.String getSysCompanyCode(){
         return this.sysCompanyCode;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  所属公司
      */
     public void setSysCompanyCode(java.lang.String sysCompanyCode){
         this.sysCompanyCode = sysCompanyCode;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  流程状态
      */
     @Column(name ="BPM_STATUS",nullable=true,length=32)
     public java.lang.String getBpmStatus(){
         return this.bpmStatus;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  流程状态
      */
     public void setBpmStatus(java.lang.String bpmStatus){
         this.bpmStatus = bpmStatus;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  区县名称
      */
     @Column(name ="COUNTRYNAME",nullable=true,length=50)
     public java.lang.String getCountryname(){
         return this.countryname;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  区县名称
      */
     public void setCountryname(java.lang.String countryname){
         this.countryname = countryname;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  区县编码
      */
     @Column(name ="COUNTRYCODE",nullable=true,length=50)
     public java.lang.String getCountrycode(){
         return this.countrycode;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  区县编码
      */
     public void setCountrycode(java.lang.String countrycode){
         this.countrycode = countrycode;
     }
     /**
      *方法: 取得java.lang.String
      *@return: java.lang.String  排序字段
      */
     @Column(name ="ORDERCODE",nullable=true,length=32)
     public java.lang.String getOrdercode(){
         return this.ordercode;
     }

     /**
      *方法: 设置java.lang.String
      *@param: java.lang.String  排序字段
      */
     public void setOrdercode(java.lang.String ordercode){
         this.ordercode = ordercode;
     }
 }

5.数据库数据结构：

6.效果图：