怎么用js做一个地区选择控件的特效啊

怎么用js做一个地区选择控件的特效啊,第1张

1.

首先写一个js文件,areaLocation.js:

var

provinceArray=

new

Array()

provinceArray=[

{"pname":"江苏",

"country":[

{

"cname":"南京市",

"town":["玄武区","白下区","秦淮区","建邺区","雨花台","江宁区",

"六合区","溧水县","高淳县"]},

{

"cname":"南通市",

"town":["崇川区","港闸区","启东市","如皋市","通州市","海门市","海安县","如东县"]

},

{

"cname":"苏州市",

"town":["金阊区","沧浪区","平江区","虎丘区","吴中区","张家港","昆山市","吴江市","太仓市"]

}

]

},

{"pname":"上海",

"country":[

{

"cname":"上海市",

"town":["徐汇区","普陀区","杨浦区","虹口区","卢湾区","浦东区","黄浦区","长宁区","闸北区","静安区","闵行区","松江区"]

}

]

}

]

function

areaInitialize(){

province.length=1

for(var

i

=

0i<provinceArray.lengthi++){

var

pro

=

provinceArray[i].pname

province.options[province.length]

=

new

Option(pro,pro)

}

}

function

changeCLocation(id,city){

//alert(id)

city.length

=

0

if(id>0){

var

j=id-1

var

i

var

countrys

=

new

Array()

countrys

=

provinceArray[j].country

city.options[0]

=

new

Option('不限','')

for

(i=0i

<

countrys.length

i++){

var

cname

=

countrys[i].cname

city.options[city.length]

=

new

Option(cname,

cname)

}

changeTLocation(id,1,town)

}else

if(id==0){

city.length

=

0

town.length

=

0

city.options[city.length]

=

new

Option('不限','')

town.options[town.length]

=

new

Option('不限','')

}

}

function

changeTLocation(pid,cid,town){

//alert(cid)

var

countrys

=

new

Array()

var

towns

=

new

Array()

town.length

=

0

var

i

countrys

=

provinceArray[pid-1].country

areaId

=

countrys[cid-1].areaId

towns

=

countrys[cid-1].town

city.options[0]

=

new

Option('不限','')

town.options[0]

=

new

Option('不限','')

for

(i=0i

<

towns.length

i++){

var

tname

=

towns[i]

town.options[town.length]

=

new

Option(tname,tname)

}

town.options[0]

=

new

Option('不限','')

}

2.

再写一个html页面:

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN">

<html>

<head>

<script

type="text/javascript"

></script>

<script

type="text/javascript">

window.onload=areaInitialize()

</script>

</head>

<body>

<select

size="1">

<option

value=0

selected>--请选择--</option>

</select>

<select

size="1"

>

<option

value=0

selected>--请选择--</option>

</select>

<select

size=1>

<option

value=0

selected>--请选择--</option>

</select>

</body>

</html>

你好 我只有中的 省市联动 ··贴上代码 供你做参考吧

//省份数组

var shenArr=["请选择省份/城市","北京市","上海市","天津市","重庆市","香港特别行政区","澳门特别行政区","湖南","辽宁","河北","山东","河南","湖北","福建","四川","江西"]

//自定义下标(属性)

//shenArr["名称"]

shenArr["请选择省份/城市"]=["请选择城市/地区"]

shenArr["北京市"]=["北京市"]

shenArr["上海市"]=["上海市"]

shenArr["天津市"]=["天津市"]

shenArr["重庆市"]=["重庆市"]

shenArr["香港特别行政区"]=["香港特别行政区"]

shenArr["澳门特别行政区"]=["澳门特别行政区"]

shenArr["福建"]=["福州市","厦门市","泉州市","漳州市","南平市","三明市","龙岩市","莆田市"]

shenArr["湖南"]=["长沙市","株洲市","湘潭市","郴州市","益阳市","娄底市","衡阳市","常德市"]

shenArr["辽宁"]=["沈阳市","大连市","抚顺市","鞍山市","铁岭市","本溪市","丹东市","锦州市"]

shenArr["河北"]=["保定市","唐山市","邯郸市","邢台市","沧州市","衡水市","廊坊市","承德市"]

shenArr["山东"]=["济南市","青岛市","威海市","潍坊市","菏泽市","济宁市","莱芜市","烟台市"]

shenArr["河南"]=["洛阳市","焦作市","商丘市","信阳市","周口市","鹤壁市","安阳市","濮阳市"]

shenArr["湖北"]=["武汉市","荆门市","汉口市","咸宁市","襄樊市","荆州市","黄石市","孝感市"]

shenArr["江西"]=["南昌市","赣州市","上饶市","宜春市","吉安市","抚州市","萍乡市","九江市"]

$.each(shenArr,function(i,val){

//添加下拉项

$("select[name=sheng]").append("<option value='"+val+"'>"+val+"</option>")

})

//市级下拉框绑定

$("select[name=sheng]").change(function(){

var index=$(this).val()

var shiArr=shenArr[index]

$("select[name=shi]").empty()

$.each(shiArr,function(i,val){

//添加下拉项

$("select[name=shi]").append("<option value='"+val+"'>"+val+"</option>")

})

})

<select name="sheng"></select>&nbsp

<select name="shi">

<option>请选择城市/地区</option>

</select>

希望能帮到你 谢谢


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11756365.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存