ajax实现三级联动

Original 2018-12-23 21:27:32 183
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>省市区ajax三级联动</title>

<script src="../common/js/jquery-3.3.1.js"></script>

</head>

<body>

<h3>省市区,ajax三级联动</h3>

省:<select name="" id="pro">

<option value=""></option>

</select>

市:<select name="" id="city"></select>

区:<select name="" id="area"></select>

<script>

$(function(){

$.ajax({

type:'post',

url:'./php/pro.json',

dataType:'json',

data:'',

success:function(data){

let option = '<option value="">选择(省)</option>';

$.each(data,function(key,val){

option += '<option value="'+data[key].proId+'">'+data[key].proName+'</option>';

})

$('#pro').html(option);

// $('option[value=""]').remove();

}

})

//选择市

$('#pro').change(function(){

$('#pro option[value=""]').remove();

console.log($('#pro option:selected').text());

$.ajax({

type:'post',

url:'./php/city.json',

dataType:'json',

data:'',

success:function(data){

console.log(data);

let option = '<option value="">选择(市)</option>';

$.each(data,function(index){

if(data[index].proId == $('#pro').val()){

option += '<option value="'+data[index].cityId+'">'+data[index].cityName+'</option>'

}

})

$('#city').html(option);

}

})

})

//选择区

$('#city').change(function(){

$('#city option[value=""]').remove();

console.log($('#city option:selected').text());

$.ajax({

type:'post',

url:'./php/area.json',

dataType:'json',

data:'',

success:function(data){

console.log(data);

let option = '<option value="">选择(区)</option>';

$.each(data,function(index){

if(data[index].cityId == $('#city').val()){

option += '<option value="'+data[index].areaId+'">'+data[index].areaName+'</option>'

}

})

$('#area').html(option);

}

})

})

})

</script>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2018-12-24 09:14:45
Teacher's summary:不知道是你是否真的搞明白了, 不过,从作业来看,你没有放上数据部分, 也没有截图

Release Notes

Popular Entries