省,市区二级联动[自用]

最新推荐文章于 2023-04-11 09:33:10 发布

id011235

最新推荐文章于 2023-04-11 09:33:10 发布

阅读量99

点赞数

文章标签： javascript ajax 服务器

本文链接：https://blog.csdn.net/dengpaos/article/details/125231291

版权

<div class="col-sm-6">
						<div class="form-group">
							<label class="col-sm-4 control-label">省 <i class="text-danger">*</i>：
							</label>
							<div class="col-sm-8">
								<!-- 省 -->
								<select class="form-control"  style="width: 255px;" name="provinceId" id="provinceId"
										onchange="getCityList(this.options[this.options.selectedIndex].value)">
									<option value="">请选择省份</option>
									<option th:each="type,state:${SYS.getProvinceList()}" th:value="${type.id}"
											th:text="${type.name}"
											th:attr="selected=${byCompany.provinceId+'' == type.id+''?true:false}"></option>
								</select>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label class="col-sm-4 control-label">市 <i class="text-danger">*</i>：
							</label>
							<div class="col-sm-8">
								<!-- 市 -->
								<select name="cityId" class="form-control" id="cityId"  style="width: 255px;">
									<option value="">请选择市区</option>
									<option th:each="type,state:${SYS.list()}" th:value="${type.id}"
											th:text="${type.name}"
											th:attr="selected=${byCompany.cityId+'' == type.id+''?true:false}"></option>
								</select>
							</div>
						</div>
					</div>

function getCityList(id) {
    changeCity('GET', `/xx/xx/xx?xx=${id}`, true, function (val) {
        if (val.code == 0) {
            var contents = '';
            for (let i = 0; i < val.result.length; i++) {
                (
                    function (j) {
                        contents += ` 
                                <option value="${val.result[j].id}">${val.result[j].name}</option>               `
                    }
                )(i)
            }
            document.getElementById('cityId').innerHTML = contents
        }
    })
}

function changeCity(methods, queryParams, hasSync, success) {
    var urls = 'http://' + window.location.host
    if (window.XMLHttpRequest) {
        var ajaxActive = new XMLHttpRequest()
        ajaxActive.open(methods, urls + queryParams, hasSync)
        // 需要设置请求报文
        // ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajaxActive.send()
        ajaxActive.onreadystatechange = function () {
            if ( ajaxActive.status == 200) {
                console.log(JSON.parse(ajaxActive.responseText))
                success(JSON.parse(ajaxActive.responseText));
            }
        }
    }
}