補2017.5.13
阿新 • • 發佈：2017-05-22
china mysqli area select .html var new border 技術
三級聯動的做法。(終極封裝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;
}
}
?>
|
補2017.5.13