<select>简易的二级联动

1.首先是表单页面：

<tr>
    <td align="right">
        <label class="Validform_label">
            所在区县:
        </label>
    </td>
    <td class="value">
        <select id="atcounty" name="atcounty" style=" 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=" 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.效果图：