三级联动的做法。(终极封装JS)
jQuery(说实话,这个我是真的没搞明白)
2
3
4
5
6
7
8
9
10
11
12
|
<!
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>"; } $("#qu").html(str); } });
其次就是处理页面:chuli.php
1
2
3
4
5
6
7
|
<?
php
$code=$_POST["code"];
require "DBDA.class.php";
$db=new DBDA();
$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";
$str=$db->strquery($sql);
echo $str;
|
最后就是封装的类文件:DBDA.class.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function strquery($sql)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db ->query($sql);
$arr =$result->fetch_all();
$str="";
foreach($arr as $v)
{
$str=$str.implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
}
?>
|