Qing/HTML
Qing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基本完成,有bug

Browse Source
This commit is contained in:
landaiqing 2023-05-01 21:33:04 +08:00
parent c41689b828
commit 71d37fac5f
2 changed files with 68 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
View File

@ -13,10 +13,10 @@
<div>
<form>
省份：
<select name="province" id="province" onchange="showCity()">
<select name="province" id="province">
<option value="0">--请选择--</option>
</select>&nbsp;&nbsp; 城市：
<select name="city" id="city" onchange="showArea()">
<select name="city" id="city">
<option value="0">--请选择--</option>
</select>&nbsp;&nbsp; 地区：
<select name="area" id="area">
@ -28,6 +28,16 @@
<script>
$(function(){
getCountry();
$("#province").change(function(){
CountryId=$("#province").val();
// console.log(FatherId);
getCity(CountryId);
CityID=$("#city").val();
console.log(CityID);
getArea(CityID);
});
})
</script>
</html>

80
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
View File

@ -1,13 +1,32 @@
function getCountry(code){
$.ajax({
url : './json/third-level-address.json',
type : 'get',
async: false,
success : function(data) {
if(data=="error"){
alert("系统错误");
return;
}
function getData(){
$.ajax({
url : './json/third-level-address.json',
type : 'get',
async: false,
success : function(data) {
if(data=="error"){
alert("系统错误");
return;
}
dataJson=data;
}
});
return dataJson;
}
function getCountry(){
// $.ajax({
// url : './json/third-level-address.json',
// type : 'get',
// async: false,
// success : function(data) {
// if(data=="error"){
// alert("系统错误");
// return;
// }
var data = getData();
var country = new Array();
var children = new Array();
var countryCode=new Array();
@ -16,25 +35,38 @@ function getCountry(code){
country.push(tmp.name);
children.push(tmp.children);
});
$('#country').show().html(country);
// console.log(children);
// for(var i in data){
// console.log(data[i].children[0].children[0].code);
// }
// console.log(data[0].children[1].name);
var options = "<option value='0'>--请选择--</option>";
for(var i in data){
if(code && code == data[i].code ){
options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>";
}else{
options += "<option value='" + data[i].code + "' >" + data[i].name+"</option>";
}
options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>";
$("#province").html(options);
// console.log(data[i].code);
}
},
error : function(data) {
html = "<option value='0'>--请选择--</option>";
}
})
function getCity(countryCode){
var data = getData();
$('#city').empty();
var options = "<option value='0'>--请选择--</option>";
for(var i in data){
if(countryCode && countryCode == data[i].code){
options += "<option value='" + data[i].children[0].code + "' selected>" + data[i].children[0].name+"</option>";
}
$("#city").html(options);
}
}
function showCity(){
function getArea(cityCode){
var data = getData();
var options = "<option value='0'>--请选择--</option>";
for(var i in data){
if(cityCode && cityCode == data[i].children[0].code){
options += "<option value='" + data[i].children[0].children[0].code + "' selected>" + data[i].children[0].children[0].name+"</option>";
}
$("#area").html(options);
}
}