欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JSON+HTML實現(xiàn)國家省市聯(lián)動選擇效果

 更新時間:2014年05月18日 09:55:45   作者:  
實現(xiàn)國家省市聯(lián)動的方法有很多,本文要為大家介紹的JSON+HTML如何實現(xiàn),需要的朋友可以參考下
復(fù)制代碼 代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>json</title>
<script type="text/javascript">
<!--
var list=[{"name":"中國",
"value":"86",
"province":[{"name":"湖北",
"value":"430000",
"city":[{"name":"武漢","value":"wh"},
{"name":"黃岡","value":"hg"},
{"name":"襄陽","value":"xy"}]},
{"name":"河北",
"value":"100000",
"city":[{"name":"邯鄲","value":"hd"},
{"name":"保定","value":"bd"},
{"name":"石家莊","value":"sjz"}]},

{"name":"湖南",
"value":"440000",
"city":[{"name":"長沙","value":"cs"},
{"name":"株洲","value":"zz"},
{"name":"衡陽","value":"hy"}]}]},
{"name":"美國",
"value":"22",
"province":[{"name":"阿肯色",
"value":"990000",
"city":[{"name":"紐約","value":"ny"},
{"name":"華盛頓","value":"hsd"},
{"name":"波士頓","value":"bsd"}]},

{"name":"阿哈哈",
"value":"980000",
"city":[{"name":"AA","value":"ahd"},
{"name":"BB","value":"abd"},
{"name":"CC","value":"asjz"}]}]

}];

function init(){
var _country=document.getElementById("country");
for(var e in list){
var opt_1=new Option(list[e].name,list[e].value);
_country.add(opt_1);
}
}



function toProvince(){
var _country=document.getElementById("country");
var _province=document.getElementById("province");
var _city=document.getElementById("city");
var v_country=_country.value;

_province.options.length=1;
_city.options.length=1;

for(var e in list){
if(list[e].value==v_country){
for( var p in list[e].province){
var opt_2=new Option(list[e].province[p].name,list[e].province[p].value);
_province.add(opt_2);

}
break;
}
}
}


function toCity(){
var _country=document.getElementById("country");
var _province=document.getElementById("province");
var _city=document.getElementById("city");

var v_country=_country.value;
var v_province=_province.value;

//_province.options.length=1;
_city.options.length=1;


for(var e in list){
if(list[e].value==v_country){
for( var p in list[e].province){
//alert(list[e].province[p].value);
if(list[e].province[p].value==v_province){
// alert(list[e].province[p].value);
for(var cc in list[e].province[p].city){
var opt_3=new Option(list[e].province[p].city[cc].name,list[e].province[p].city[cc].value);
_city.add(opt_3);
}

return;
}


}
break;
}
}
}

//-->
</script>
</head>

<body onload="init();";>
<select id="country" onchange="toProvince();">
<option value="-1">--請選擇國家---</option>
</select>
<select id="province" onchange="toCity();">
<option value="-1">--請選擇省份---</option>
</select>
<select id="city">
<option value="-1">--請選擇市區(qū)---</option>
</select>

</body>
</html>

相關(guān)文章

  • event.currentTarget與event.target的區(qū)別介紹

    event.currentTarget與event.target的區(qū)別介紹

    event.currentTarget與event.target的區(qū)別想大家在使用的時候不是很在意,本文以測試代碼來講解它門之間的不同
    2012-12-12
  • 詳解js中call與apply關(guān)鍵字的作用

    詳解js中call與apply關(guān)鍵字的作用

    本文主要介紹js中call與apply關(guān)鍵字的作用以及它們的用法,具體實例如下,希望對大家有所幫助
    2016-11-11
  • JS實現(xiàn)秒殺倒計時特效

    JS實現(xiàn)秒殺倒計時特效

    這篇文章主要為大家詳細介紹了JS實現(xiàn)秒殺倒計時特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • javascript 二進制運算技巧解析

    javascript 二進制運算技巧解析

    javascript 中的二進制運算的一些技巧,曬出來和你們分享一下,希望可以幫助你們
    2012-11-11
  • JS溫故而知新之變量提升和時間死區(qū)

    JS溫故而知新之變量提升和時間死區(qū)

    這篇文章主要給大家介紹了關(guān)于JS溫故而知新之變量提升和時間死區(qū)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼

    JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼

    這篇文章主要介紹了JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • Js nodeType 屬性全面解析

    Js nodeType 屬性全面解析

    本文是對Js nodeType的屬性進行了全面分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • 詳解js中的apply與call的用法

    詳解js中的apply與call的用法

    在ECAMScript3給Function的原型定義了兩個方法,它們是Function.prototype.call和Function.prototype.apply。本文詳細介紹了apply與call的用法,有需要的可以參考下。
    2016-07-07
  • JS監(jiān)聽變量改變的實現(xiàn)

    JS監(jiān)聽變量改變的實現(xiàn)

    本文主要介紹了JS監(jiān)聽變量改變的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 使用JSON格式提交數(shù)據(jù)到服務(wù)端的實例代碼

    使用JSON格式提交數(shù)據(jù)到服務(wù)端的實例代碼

    這篇文章主要介紹了使用JSON格式提交數(shù)據(jù)到服務(wù)端的實例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下
    2018-04-04

最新評論