码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现ajax省市区三联

时间:2017-10-30 11:29:56      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:append   tee   state   ntb   child   urlencode   header   ice   obj   

<!-- /**
* @fileName: linkageUI.class.php
* @author: wk
* @DateTime: 2017/10/29 17:25
* @Description:
*/ -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>
Document
</title>
</meta>
</meta>
</meta>
</head>
<body>
省:
<select id="province" name="">
<option value="">
请选择
</option>
</select>
市:
<select id="city" name="">
<option value="">
请选择
</option>
</select>
区/县:
<select id="district" name="">
<option value="">
请选择
</option>
</select>
</body>
</html>
<script type="text/javascript">
var province = document.getElementById("province");
var city = document.getElementById("city");
var district = document.getElementById("district");

window.onload = function(){
change("",province);
};

province.onchange = function(){
if(province.value != ""){
change(province.value,city);
}

city.options.length = 1;
district.options.length = 1;
};

city.onchange = function(){
if(city.value != ""){
change(city.value,district);
}

district.options.length = 1;
};

function change(objFvalue,objC){
var res = new XMLHttpRequest();
// res.open("GET","linkageDemo.php?code=" + objFvalue);
res.open("POST","linkageDemo.php");
res.onreadystatechange = function(){
if(res.readyState == 4 && res.status == 200){
var str = res.responseText;
if(str){
objC.options.length = 1;
createOption(str,objC);
}
}
};
res.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
res.send("code="+objFvalue);
}

function createOption(str,obj){
var row = str.split(‘|‘);
for(var i in row){
arr = row[i].split(‘^‘);
var option = document.createElement("option");
option.value = arr[0];
option.text = arr[1];
console.log(option.text);
obj.appendChild(option);
}
}
</script>

原生JS实现ajax省市区三联

标签:append   tee   state   ntb   child   urlencode   header   ice   obj   

原文地址:http://www.cnblogs.com/kuku2/p/7753256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!