Ajax三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
</head>
<body>
<!--三级联动 - 两个二级联动-->
<select id="province">
</select>
<select id="city">
<option value=""></option>
</select>
<select id="qu">
<option value=""></option>
</select>
<script src="./js/createXMLHttpRequest.js"></script>
<script>
//获取省份、城市下拉列表
var provinceElement = document.getElementById('province')
var cityELement = document.getElementById('city')
var datas;
//1.当页面加载完毕后,动态获取省份信息
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
//得到服务器端返回的数据
var response = xhr.responseText;
//将JSON字符串转换成JSON对象
datas = JSON.parse(response)
//得到数组类型的对象 - 遍历
for(var i = 0;i<datas.length;i++){
var data = datas[i]
var province = data.province;
//将数据更新到HTML页面中
var opt = document.createElement('option')
opt.setAttribute('value',province)
opt.textContent = province;
provinceElement.appendChild(opt)
}
}
}
xhr.open('get','data/server1.json');
xhr.send(null);
//给省份下拉列表绑定change事件
provinceElement.addEventListener('change',function(){
//给城市下拉列表的选项清空
var cityOpts = cityELement.options
for(var k = 1;k<cityOpts.length;k++){
cityELement.removeChild(cityOpts[k])
k--;
}
//1.用户选择的省份信息
var opts = provinceElement.options;//获取指定下拉列表所有选项
var index = provinceElement.selectedIndex;//被选中<option>的索引值
var opt = opts.item(index)
var provinceName = opt.getAttribute('value')
//2.根据省份信息获取对应的城市信息
for(var i = 0;i<datas.length;i++){
var data = datas[i]
var province = data.province;
if(provinceName === province){
//获取对应的城市信息
var cities = data.cities;
for(var j=0;j,cities.length;j++){
var city = cities[j].city
//将城市信息更新到HTML页面
var opt = document.createElement('option')
opt.setAttribute('value',city)
opt.textContent = city
cityELement.appendChild(opt)
}
}
}
})
function createXMLHttpRequest(){
var httpRequest;
if(window.XMLHttpRequest){
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){//适用于IE浏览器
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE 7+
}catch(e){
try{
httpRequest = new ActiveXObject ("Microsoft.XMLHTTP");//IE 6-
}catch(e){}
}
}
return httpRequest;
}
</script>
</body>
</html>
jQuery三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
</head>
<body>
<select id="province">
</select>
<select id="city">
<option value=""></option>
</select>
<select id="qu">
<option value=""></option>
</select>
<script src="./js/createXMLHttpRequest.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
var $city = $('#city')
var $province = $('#province')
var json;
$.getJSON('data/server1.json',function(data){
json = data
$.each(data,function(index,obj){
var provinceName = obj.provinc;
$province.append($('<option value="'+ provinceName +'">'+ provinceName+'</option>'))
})
})
$province.bind('change',function(){
//$city.empty()
//$city.append($('<option value="">----</option>'))
var provinceElementName = $(this).children('option:selected').text()
$.each(json,function(index,obj){
var provinceName = obj.provinc;
if(provinceElementName === provinceName){
var citits = obj.citits;
$each(cities,function(index,obj){
var cityName = obj.city;
$city.append($('<option value="'+ cityName +'">' + cityName+'</option>'))
})
}
})
})
</script>
</body>
</html>