首先 默認顯示一級下拉框內容 我這邊是tp5 的模板
1.Ajax的異步 到後臺 讀取 和一級下拉框 對應的數據 然後 return json 數據
2.json 數據 前臺 用eval 函數 轉換成 對象
3. 用循環 把要的數據 通過jQuery 追加到 二級下拉框裏面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加文章</title>
<link rel="stylesheet" type="text/css" href="/static/homeback/css/adminlist.css" />
<meta name="description" content="Dashboard">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--Basic Styles-->
</head>
<body>
選擇文章分類：
<select id="province">
<option>請選擇</option>
{volist name="data" id="vo"}
<option value ="{$vo.id}">{$vo.navName}</option>
{/volist}
</select>
<select id="city">
<option>請選擇</option>
</select>
<script type="text/javascript" src="/static/homeback/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
/*
* 需要思考哪些事情?
* * 在什麼時候執行Ajax的異步請求?
* * 當用戶選擇具體的省份信息時
*/
// 1. 爲id爲province元素綁定onchange事件
var provinceEle = document.getElementById("province");
provinceEle.onchange = function(){
// 清空
var city = document.getElementById("city");
var opts = city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
}
if(provinceEle.value != "請選擇"){
// 2. 執行Ajax異步請求
var xhr = getXhr();
xhr.open("post","{:url('article/test')}");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+provinceEle.value);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
// 接收服務器端的數據內容
var obj;
var data = xhr.responseText;
var obj = eval(data);//成功以後調用eval方法將數組還原成js數組對象
for( var i = 0;i<obj.length;i++){
$("#city").append('<option value="' + obj[i]['id'] + '">' + obj[i]['navName'] + '</option>');
//$("#city").html("<option value='"+data[i][areaid]+"'>"+data[i][areaname]+"</option>")
alert(obj[i]['navName']);
}
//var cities = data;
// data是字符串,轉換爲數組
//var cities = data.split(",");
//for(var i=0;i<cities.length;i++){
// var option = document.createElement("option");
// var textNode = document.createTextNode(cities[i]);
// option.appendChild(textNode);
// city.appendChild(option);
//}
}
}
}
};
// 定義獲取ajax核心對象的函數XMLHttpRequest對象的函數
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>
</html>