动态填充两个相关联的下拉框。例如:先获取所有的省,然后根据用户选中的省再获取该省的所有市。效果如下图:
图1
图2
html代码如下:
<div class="user-info-detail">
<p>
<span class="item-name">现居地</span>
<select class="js-get-AllProvince" data-url="queryAllProvince" id="provinceId" name="provinceId">
<option value="">获取中...</option>
</select>
<select class="js-get-city" data-url="queryCityByProvinceId" id="addressId" name="addressId">
<option>请选择</option>
</select>
</p>
</div>
js代码如下:
addressChange();
/**
* 获取地址
*/
function addressChange(){
$('.js-get-AllProvince').each(function(){
const url = $(this).data('url');
getProvinceList(this,url);
});
/**
* 获取省份下面的所有市
*/
$('.js-get-AllProvince').on('change',function() {
if ($('.js-get-AllProvince').val()) {
let data = $('.js-get-AllProvince').val();
$(".js-get-city").each(function () {
const url = $(this).data('url');
getCityByProvinceId(this, url, data);
});
}else{
$(".js-get-city").html('<option value="">请选择</option>');
}
});
}
/**
* 获取select列表(省)
*/
function getProvinceList(cur,url){
$.ajax({
url: API[url],
success: function(json) {
if(json.success) {
$(cur).html(render(json.result));
}else {
Util.alertMessage(json.error);
}
}
});
}
/**
* 渲染select(全部省)
*/
function render(list=[]) {
let html = '<option value="">请选择</option>';
for(let i = 0, l = list.length; i < l; i ++) {
html += `<option value="${list[i].id}">${list[i].name}</option>`;
}
return html;
}
/**
* 获取select列表(根据省份id查询所有市)
*/
function getCityByProvinceId(cur, url,data,defaultVal) {
$.ajax({
url: API[url],
data: {
provinceId:data,
},
success: function(json) {
if(json.success) {
$(cur).html(renderCity(json.result));
if(defaultVal){//选中默认值
$('#addressId').val(defaultVal);
}
}else {
Util.alertMessage(json.error);
}
}
});
}
/**
* 渲染select(省份下面的所有市)默认选中第一个
*/
function renderCity(list=[]) {
let html = '';
for(let i = 0, l = list.length; i < l; i ++) {
html += `<option value="${list[i].id}">${list[i].name}</option>`
}
return html;
}
css代码如下:
.user-info-detail{
margin: 0 30px;
p{
position: relative;
height: 40px;
line-height: 40px;
margin-bottom: 18px;
font-size: 14px;
.item-name{
display: inline-block;
width: 72px;
margin-right: 18px;
color: #999;
text-align: right;
}
select{
width: 240px;
height: 40px;
line-height: 40px;
padding: 0px 46px 0 10px;
box-sizing: border-box;
margin-right: 10px;
color: #333;
background-color: #f5f5f5;
border: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance:none;
appearance: none;
position: relative;
background-image: url("../../asset/images/caret-down.png");
background-repeat: no-repeat;
background-position: 100% center;
}
}
}
caret-down.png
版权声明:本文为博主原创文章,未经博主允许不得转载。https://blog.csdn.net/qq_36584352/article/details/80198869