data返回的值可能带有空格换行等，所以要用trim()方法去空格！！！
第二种方式：封装成插件，以后可以随时调用（重要）
（1）主页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title><br>//引入jquery包
<script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
<script src="sanji.js"></script>
</head>
<body><br>//id要与封装的js插件中一致
<div id="sanji"></div>
</body>
</html>（2）我们自己封装的js插件
$(document).ready(function(e){
//扔三个下拉列表到主页面建的div中
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
//加载省的数据
LoadSheng();
//加载市的数据
LoadShi();
//加载区的数据
LoadQu();
//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化
$("#sheng").click(function(){
LoadShi();
LoadQu();
})
//给市的下拉列表添加点击事件，当市变化时，对应的区发生变化
$("#shi").click(function(){
LoadQu();
})});
//加载省的下拉列表
function LoadSheng() {
var pcode = "0001";
$.ajax({
async: false,
url: "chuli.php",
data: { code: pcode },
type: "POST",
dataType: "TEXT",
success: function(data) {
var hang = data.trim().split("|");
var str = "";
for(var i = 0; i < hang.length; i++) {
var lie = hang[i].split("^");
str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";
}
$("#sheng").html(str);
}
});
}
//加载市省的下拉列表
function LoadShi() {
var pcode = $("#sheng").val();
$.ajax({
async: false,
url: "chuli.php",
data: { code: pcode },
type: "POST",
dataType: "TEXT",
success: function(data) {
var hang = data.trim().split("|");
var str = "";
for(var i = 0; i < hang.length; i++) {
var lie = hang[i].split("^");
str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
}
$("#shi").html(str);
}
});
}
//加载省的下拉列表
function LoadQu() {
var pcode = $("#shi").val();
$.ajax({
url: "chuli.php",
data: { code: pcode },
type: "POST",
dataType: "TEXT",
success: function(data) {
var hang = data.trim().split("|");
var str = "";
for(var i = 0; i < hang.length; i++) {
var lie = hang[i].split("^");
str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
