html 城市选择,城市选择

例子1

var provinceArray = [

{name:'四川省', citys:['成都市','德阳市', '绵阳市', '巴中市', '宜宾市', '达州市']},

{name:'云南省', citys:['昆明', '漓江', '玉溪', '大理', '西双版纳']},

{name:'辽宁省', citys:['沈阳', '大连', '铁岭', '盘锦']}

]

//省

provinceNode = $('#province')

for(i=0;i

provinceObj = provinceArray[i]

tempNode = $(''+provinceObj.name+'')

provinceNode.append(tempNode)

}

//市

cityNode = $('#city')

cityNode.attr('selected')

//设置默认显示的市

for(i=0;i

var cityName = provinceArray[0].citys[i]

var tempNode = $(''+cityName+'')

cityNode.append(tempNode)

}

//注意: 下拉菜单切换不同的选项对应的事件是'onchange',

//通过获取下拉菜单的value来获取最新选中的选项的值

provinceNode.on('change', function(evt){

//获取选中的值

var provinceName = $(this).val()

for(i=0;i

var provinceObj = provinceArray[i]

//获取当前选中的省

if(provinceObj.name == provinceName){

//选中的省对应的城市

var cityArray = provinceObj.citys

//清空原来的内容

cityNode.empty()

//创建新的城市对应的option

for(j=0;j

var cityName = cityArray[j]

var tempNode = $(''+cityName+'')

cityNode.append(tempNode)

}

break

}

}

})

image.png

例子2

//获取全局下拉菜单标签

var provinceNode = $('#省')

var cityNode = $('#市')

var countyNode = $('#县')

//=============1.默认显示=============

//创建所有的省对应的标签

for(var provinceName in cities){

console.log(provinceName)

var provinceOptionNode = $(''+provinceName+'')

provinceNode.append(provinceOptionNode)

}

//创建市默认对应的标签

for(var cityName in cities['北京']){

var cityOptionNode = $(''+cityName+'')

cityNode.append(cityOptionNode)

}

//创建县默认对应的标签

for(var index in cities['北京']['北京']){

var countyOptionNode = $(''+cities['北京']['北京'][index]+'')

countyNode.append(countyOptionNode)

}

//==============点击切换=============

//1.省下拉菜单添加事件

provinceNode.on('change', function(){

//获取选中的值

var provinceSelectedValue = $(this).val()

//根据选中的省获取对应的市信息

var cityInfo = cities[provinceSelectedValue]

//1.更新市信息

//清空市下拉菜单

cityNode.empty()

//创建选中的省对应的市的标签

for(var cityName in cityInfo){

var cityOptionNode = $(''+cityName+'')

cityNode.append(cityOptionNode)

}

//2.更新县信息

countyNode.empty()

var countyArray = cityInfo[cityNode.val()]

for(var index in countyArray){

var countyName = countyArray[index]

var countyOptionNode = $(''+countyName+'')

countyNode.append(countyOptionNode)

}

})

//2.市下拉菜单添加事件

cityNode.on('change', function(){

var citySelectedVale = $(this).val()

var countyArray = cities[provinceNode.val()][citySelectedVale]

countyNode.empty()

for(index in countyArray){

var countyName = countyArray[index]

var countyOptionNode = $(''+countyName+'')

countyNode.append(countyOptionNode)

}

})

image.png