Bootstrap、Thymeleaf 3.0+springboot 省市区联动


效果图:
在这里插入图片描述
在这里插入图片描述

后台:(此处查出一个list

返回前端)

   /***
    * @Author lc
    * 说明:添加代理商-页面---一级数据查询
    * @Date 15:40 2019/4/24
    * @Param []
    * @return java.lang.String
    */
    @GetMapping("/add")
    public String add(ModelMap mmap)
    {
        mmap.addAttribute( "pnovince",mAgentInfoService.getAllListByParentId("1"));//此处查出一个list<map>
        return this.display();
    }
    
   /***
    * @Author lc
    * 说明:动态查询省市区--二三级数据查询
    * @Date 14:52 2019/4/25
    * @Param [aneald]
    * @return java.util.List
    */
    @PostMapping("/get_anea")
    public @ResponseBody List getArea(@RequestParam String aneald){
        return mAgentInfoService.getAllListByParentId(aneald);  //此处查出一个list<map>
    }

前端页面:

<div class="form-group">
	<label class="col-sm-3 control-label">选择地区:</label>
	<div class="col-sm-8">
			<select class="form-control" id="province" onchange="getCitys(this,'city_code');" style="width: 155px;float: left;">
				<option value="">--选择省--</option>
					<option th:each="pro:${pnovince}" th:value="${pro.area_code}",>
						[[${pro.area_name}]]
					</option>
			</select>

			<select class="form-control" id="select_city_code" onchange="getCitys(this,'area_code');" style="width: 155px;float: left">
				<option value="">--选择市--</option>
				<option th:each="city : ${city}" th:value=',${city.area_code}',>
					[[${city.areaName}]]
				</option>
			</select>

			<select class="form-control" id="select_area_code" selectVl="${(mMerchant.area_code)!}" style="width: 160px">
				<option value="">--选择区--</option>
				<option th:each="district : ${district}" th:value="${district.area_code}",>
					[[^{district.areaName}]]
				</option>
			</select>
	</div>
</div>

js 代码:

function getCitys(obj,selName) {
			if ($(obj).val() == '') {//如果为空 则清空后面的数据
				if ('city_code' == selName) {
					$("#select_" + selName).html('');
					$("#select_" + selName).append("<option value=''>--选择市--</option>");
					$("#select_" + selName).val('');
				}
				$("#select_area_code").html('');
				$("#select_area_code").append("<option value=''>--选择区--</option>");
				$("#select_area_code").val('');
			} else {//否则调后台查询二级 三级 市区数据
				$.post(prefix + "/get_anea", {"aneald": $(obj).val()}, function (data) {
					if (data) {
						$("#select_" + selName).html('');
						$("#select_" + selName).append("<option value=''>--选择市--</option>");
						$("#select_" + selName).val('');
						$.each(data, function (i, v) {
							$("#select_" + selName).append("<option value='" + v.area_code + "'>" + v.area_name + "</option>");
						});
						if (selName == 'city_code') {
							$("#select_area_code").html('');
							$("#select_area_code").append("<option value=''>--选择区--</option>");
							$("#select_area_code").val('');
						}
					}
				}, "json");
			}
		};

sql语句:

<!-- 查询省市区 数据 -->
 <select id="getAllListByParentId" parameterType="String" resultType="Map">
        select * from m_area where  area_status = 0 and parent_id = #{parent_id}
    </select>

ok 就能看到效果了 表结构或许不一样 sql 语句自行斟酌 ^ _ ^

发表评论

邮箱地址不会被公开。 必填项已用*标注

昵称 *