jquery 10行代码实现省市区联动

 1. html 代码

<div class="div_c_r">
    <select id="sel_provinceid" name="provinceid" onchange="setsel_val(0,1)" style="border: 1px;">
        <option value="">请选择省</option>
    </select>
    <select id="sel_cityid" name="cityid"  onchange="setsel_val(0,2)" style="border: 1px;">
        <option value="">请选择市</option>
    </select>
    <select id="sel_areaid" name="areaid"  style="border: 1px;">
        <option value="">请选择区</option>
    </select>
</div>

PS:如果是vue 版本 更简单 ，一样的思路，这里就不写了，

2. js 代码
 

function setsel_val(group, type){
    letall_sel=["#sel_provinceid","#sel_cityid"  ,"#sel_areaid"];
    let pidem=type==0?null:$(all_sel[type-1]).val(), emid = all_sel[type], clems=all_sel.splice(type);
    for(let em of clems){  $(em).html("<option value=''>-- 请选择--</option>"); }
    $.ajax({ url: '/i/util/getRegion',type: 'POST',data : {type:type,pid:pidem},success: function(data) {
            let opens=[];
            for(var i=0;i<data.length;i++){ opens.push("<option value='"+data[i].id+"'>"+data[i].name+"</option>");}
            $(emid).append(opens.join(""));
        }});
}

3.java 后端

/**
 * 获取申请列表
 * @return
 */
@PostMapping("getRegion")
public Object getRegion(@RequestParam Integer type,Integer pid){
    return     this.utilMapper.getRegion(new String[] {"s_provincelist","s_citylist","s_arealist"}[type], pid);
}

4.mapp.java

public List<HashMap<String,String>> getRegion(@Param("table") String table, @Param("pid") Integer pid);

 

5.sql

<select id="getRegion" resultType="map" >
    select `oid` `id`,`name` from ${table}  <if test="pid!=null"> where pid=#{pid} </if>
</select>

6.数据库

6.1--省

CREATE TABLE `s_provincelist` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `oid` varchar(20) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_provinceid` (`oid`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8 COMMENT='省份信息表'

5.2 市

CREATE TABLE `s_citylist` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `oid` varchar(20) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  `pid` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_cityid` (`oid`)
) ENGINE=InnoDB AUTO_INCREMENT=356 DEFAULT CHARSET=utf8 COMMENT='行政区域地州市信息表'

6.3  区

CREATE TABLE `s_arealist` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `oid` varchar(20) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  `pid` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_areaid` (`oid`)
) ENGINE=InnoDB AUTO_INCREMENT=3348 DEFAULT CHARSET=utf8 COMMENT='行政区域县区信息表'