第一次接觸的二級聯動是學習php的時候用ajax請求實現城市之間的二級聯動;
后來項目接觸到這中需求之后,發現我們的后台是Java(新手對Java的后台一竅不通);
所以就想到了用json的來實現,由於項目時間緊,任務重,根本不給我思考的機會(當時寫了個json文件是報錯的),
那么問題來了;該怎么辦呢;突然靈機一動,用數組啊,一級將行政區寫死在頁面上,二級用change事件查找對應的縣,區;
確實是實現了目的;但是代碼的不清晰導致了很多問題;
今天有時間,回過頭來,想了一會靜靜,然后就開始改代碼;
首先附上json文件
[
{
"p" : "銀川市",
"c" : [{"c1":"興慶區"},{"c1":"金鳳區"},{"c1":"西夏區"},{"c1":"中寧縣"},{"c1":"靈武市"},{"c1":"賀蘭縣"}]
},
{
"p" : "石嘴山市",
"c" : [{"c1":"大武口區"},{"c1":"惠農區"},{"c1":"平羅縣"}]
},
{
"p" : "吳忠市",
"c" : [{"c1":"利通區"},{"c1":"紅寺堡區"},{"c1":"鹽池縣"},{"c1":"同心縣"},{"c1":"青銅峽市"}]
},
{
"p" : "中衛市",
"c" : [{"c1":"沙坡頭區"},{"c1":"中寧縣"},{"c1":"海原縣"}]
},
{
"p" : "固原市",
"c" : [{"c1":"原州區"},{"c1":"涇源縣"},{"c1":"西吉縣"},{"c1":"隆德縣"},{"c1":"彭陽縣"}]
}
]
其次附上html和js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
行政區選項: <select name="" id="city">
<option value='-1'>==請選擇==</option>
</select>
</div>
<p>
縣市選項: <select name="" id="country">
<option value='-1'>==請選擇==</option>
</select>
</p>
<script src="js/jquery-1.11.3.js"></script>
<script>
function TwoLeve(citys,countrys){
}
var ss;
$.getJSON("mydata.json",function(data){
ss=data;
var html="<option value='-1'>==請選擇==</option>";
for(var i=0;i<ss.length;i++){
html+="<option value='"+ss[i].p+"'>"+ss[i].p+"</option>";
}
$("#city").html(html);
});
$("#city").change(function(){
var htmls="<option value='-1'>==請選擇==</option>";
for(var i=0;i<ss.length;i++){
if($(this).val()==ss[i].p){
var a=ss[i].c;
for(var j=0;j<a.length;j++){
htmls+="<option value='"+a[j].c1+"'>"+a[j].c1+"</option>";
}
$("#country").html(htmls);
}
}
})
</script>
</body>
</html>