javascript中在下拉列表中用数组选择省市

javascript中在下拉列表中用数组选择省市,第1张

function changeCity()

{

var province=document.myform.selProvince.value //这里的document.myform.selProvince是页面中有个id是"myform"的表单(form),里面有个下拉列表,id是 selProvince,整个的意思就是取它的值,也就是选中的省。

document.myform.selCity.options.length=0 //把selCity下拉列表的选项清0

for (var i in cityList)//循环每一个cityList 的成员

{

if (i == province)

{

for (var j in cityList[i])

{

document.myform.selCity.options.add(new Option(cityList[i][j], cityList[i][j])) //给selCity下拉列表增加条目,也就是选择项。 每个下拉列表都有options集合,它add一个option对象就能增加一个条目

}

}

}

document.myform.selCity.options.selctIndex=0//让celCity下拉列表选中第一个选项

}

function AllCity(){

for (var i in cityList)

{

document.myform.selProvince.options.add(new Option(i, i)) //为selProvince下拉列表增加一个省份选项

}

document.myform.selProvince.selectedIndex = 0 //让省份下拉列表选中第一个选项。

}

其实 document.myform.selProvince 这样的写法不好,不一定每个浏览器都支持,IE以外的浏览器很可能会报错。正确的写法是 document.getElementById("下拉列表ID") ,这样的写法走到哪里都不会出错。

(1)var provs={},存储省市的json结构数据。

(2)function loadProv() {},此函数实现了初始化页面加载数据的功能。

(3)var prov = document.getElementById("prov"),获取存放省份的select下拉菜单。

(4)for (var key in provs),遍历json结构数据。

(5)var provName = key,获取省份的名称。

(6)var optProv = document.createElement("option"),创建一个option元素对象。

(7)optProv.value = provName,设置option元素的value属性值。

(8)optProv.innerText = provName,设置option显示的文本内容。

(9)prov.appendChild(optProv),将option元素添加到select下拉菜单。

(10)function provChange() {},作为onchange事件处理函数。

(11)var prov = document.getElementById("prov"),获取省份下拉菜单。

(12)var city = document.getElementById("city"),获取城市下拉菜单。

(13)var provName = prov.value,获取当前选中的省份的value值。

(14)if (provName == "none") {

city.style.display = "none"

return

},如果值等于none,说明选中的是第一项,那么城市下拉菜单还是具有隐藏状态,并跳出函数。

(15)else {

city.style.display = ""

},否则的话显示出城市下拉菜单,默认状态它是隐藏的。

(16)var citys = provs[provName],获取城市,citys是个数组。

(17)for (var index = city.childNodes.length - 1index >= 0index--) {

var child = city.childNodes[index]

city.removeChild(child)

},遍历城市下拉菜单下的option元素,然后删除这些元素。

之所以清空就是为了防止当再次加载的时候出现累加情况。

(18)for (var index = 0index <citys.lengthindex++) {},遍历数组中的元素,也就是城市。

(19)var optCity = document.createElement("option"),创建option元素。

(20)optCity.value = citys[index],设置option元素的value值。

(21)optCity.innerText = citys[index],设置option元素的文本内容。

(22)city.appendChild(optCity),将option元素添加select下拉菜单。

数据表形式数据

json形式数据

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

//省份数组

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>

希望能帮到你 谢谢


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

原文地址:https://54852.com/bake/11549664.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存