城市选择
2019-02-14 本文已影响0人
憨猜猜
例子1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var provinceArray = [
{name:'四川省', citys:['成都市','德阳市', '绵阳市', '巴中市', '宜宾市', '达州市']},
{name:'云南省', citys:['昆明', '漓江', '玉溪', '大理', '西双版纳']},
{name:'辽宁省', citys:['沈阳', '大连', '铁岭', '盘锦']}
]
//省
provinceNode = $('#province')
for(i=0;i<provinceArray.length;i++){
provinceObj = provinceArray[i]
tempNode = $('<option>'+provinceObj.name+'</option>')
provinceNode.append(tempNode)
}
//市
cityNode = $('#city')
cityNode.attr('selected')
//设置默认显示的市
for(i=0;i<provinceArray[0].citys.length;i++){
var cityName = provinceArray[0].citys[i]
var tempNode = $('<option>'+cityName+'</option>')
cityNode.append(tempNode)
}
//注意: 下拉菜单切换不同的选项对应的事件是'onchange',
//通过获取下拉菜单的value来获取最新选中的选项的值
provinceNode.on('change', function(evt){
//获取选中的值
var provinceName = $(this).val()
for(i=0;i<provinceArray.length;i++){
var provinceObj = provinceArray[i]
//获取当前选中的省
if(provinceObj.name == provinceName){
//选中的省对应的城市
var cityArray = provinceObj.citys
//清空原来的内容
cityNode.empty()
//创建新的城市对应的option
for(j=0;j<cityArray.length;j++){
var cityName = cityArray[j]
var tempNode = $('<option>'+cityName+'</option>')
cityNode.append(tempNode)
}
break
}
}
})
</script>
</body>
</html>
image.png
例子2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/city.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<select name="" id="省">
</select>
<select name="" id="市">
</select>
<select name="" id="县">
</select>
<script type="text/javascript">
//获取全局下拉菜单标签
var provinceNode = $('#省')
var cityNode = $('#市')
var countyNode = $('#县')
//=============1.默认显示=============
//创建所有的省对应的标签
for(var provinceName in cities){
console.log(provinceName)
var provinceOptionNode = $('<option>'+provinceName+'</option>')
provinceNode.append(provinceOptionNode)
}
//创建市默认对应的标签
for(var cityName in cities['北京']){
var cityOptionNode = $('<option>'+cityName+'</option>')
cityNode.append(cityOptionNode)
}
//创建县默认对应的标签
for(var index in cities['北京']['北京']){
var countyOptionNode = $('<option>'+cities['北京']['北京'][index]+'</option>')
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 = $('<option>'+cityName+'</option>')
cityNode.append(cityOptionNode)
}
//2.更新县信息
countyNode.empty()
var countyArray = cityInfo[cityNode.val()]
for(var index in countyArray){
var countyName = countyArray[index]
var countyOptionNode = $('<option>'+countyName+'</option>')
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 = $('<option>'+countyName+'</option>')
countyNode.append(countyOptionNode)
}
})
</script>
</body>
</html>
image.png
