JavaScript实现省份与城市的级联选择

JS中的代码:

var provs=new Array('北京','深圳','上海','重庆','天津','广东','河北','山西','内蒙古','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','广西','海南','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆','香港','澳门','台湾')
cities = new Object();
cities['河北']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
cities['山西']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区');
cities['北京']=new Array('东城区','西城区','崇文区','宣武区','朝阳区','海淀区','丰台区','石景山');
cities['深圳']=new Array('罗湖','福田','南山','盐田','宝安','龙岗');
cities['上海']=new Array('宝山','金山','南市','长宁','静安','青浦','崇明','卢湾','松江','奉贤','浦东','杨浦','虹口','普陀','闸北','黄浦','闵行','徐汇','嘉定','南汇');
cities['天津']=new Array('天津市区','天津市辖区');
cities['重庆']=new Array('重庆市区','重庆市辖区');
cities['辽宁']=new Array('沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市');
cities['吉林']=new Array('长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边州','长白山管委会');
cities['黑龙江']=new Array('哈尔滨市','齐齐哈尔市','大庆市','佳木斯市','牡丹江市','七台河市','双鸭山市','黑河市','鸡西市','伊春市','绥化市','鹤岗市','加格达奇市');
cities['江苏']=new Array('南京市','苏州市','无锡市','常州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','宿迁市','淮安市','徐州市');
cities['浙江']=new Array('杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市');
cities['安徽']=new Array('合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','巢湖市','六安市','亳州市','池州市','宣城市');
cities['福建']=new Array('福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市');
cities['江西']=new Array('南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市');
cities['山东']=new Array('济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市');
cities['河南']=new Array('郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市');
cities['湖北']=new Array('武汉市','黄石市','十堰市','荆州市','宜昌市','襄樊市','鄂州市','荆门市','孝感市','黄冈市','咸宁市','随州市');
cities['湖南']=new Array('长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市');
cities['广东']=new Array('广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市');
cities['海南']=new Array('文昌市','琼海市','万宁市','五指山市','东方市','儋州市');
cities['四川 ']=new Array('成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市');
cities['贵州']=new Array('贵阳市','六盘水市','遵义市','安顺市');
cities['云南']=new Array('昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市');
cities['陕西']=new Array('西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市');
cities['甘肃']=new Array('兰州市','金昌市','白银市','天水市','嘉峪关市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市');
cities['青海']=new Array('西宁市');
cities['台湾'] = new Array('台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市');
cities['广西']=new Array('南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市');
cities['内蒙古']=new Array('呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市');
cities['西藏']=new Array('拉萨市');
cities['宁夏']=new Array('银川市','石嘴山市','吴忠市','固原市','中卫市');
cities['新疆']=new Array('乌鲁木齐市','克拉玛依市');
cities['香港']=new Array('台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市');

function getprov()
		{   var select=document.getElementById("city");
		    select.options.length=1;
			var select=document.getElementById("prov");
			for(var i=0;i<provs.length;i++)
			{
			var opt=document.createElement("option");
			opt.value=provs[i];
			opt.textContent=provs[i];
			select.appendChild(opt);
			}
			select.length=provs.length+1;
		};
function getcity()
		{   var select=document.getElementById("city");
			var pv=document.getElementById("prov").value;
			for(var i=0;i<cities[pv].length;i++)
			{
			var opt=document.createElement("option");
			opt.value=cities[pv][i];
			opt.textContent=cities[pv][i];
			select.appendChild(opt);
			}
			select.length=cities[pv].length+1;
		};

HTML中的代码(仅附选择列表):

<div>
<span>籍贯</span>

		  <select id="prov" onClick="getprov()">
		  <option selected>请选择所在省份</option>
		  </select>

		  <select id="city" onclick="getcity()">
		  <option selected>请选择所在城市</option>
		  </select>
</div>
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML本身并不能实现级联选择器,但是我们可以借助JavaScript和CSS来实现。 首先在HTML中定义好需要用到的select标签和option标签,例如: ```html <select id="province"> <option value="">请选择省份</option> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option value="guangdong">广东省</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` 接着,在JavaScript中为省份下拉框添加change事件,当选择省份时动态加载该省份下的城市信息: ```javascript const provinceSelect = document.getElementById('province'); const citySelect = document.getElementById('city'); const districtSelect = document.getElementById('district'); provinceSelect.addEventListener('change', () => { const province = provinceSelect.value; // 根据省份动态加载城市信息 if (province === 'beijing') { citySelect.innerHTML = ` <option value="">请选择城市</option> <option value="beijing">北京市</option> `; } else if (province === 'shanghai') { citySelect.innerHTML = ` <option value="">请选择城市</option> <option value="shanghai">上海市</option> `; } else if (province === 'guangdong') { citySelect.innerHTML = ` <option value="">请选择城市</option> <option value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> <option value="zhuhai">珠海市</option> `; } else { citySelect.innerHTML = ` <option value="">请选择城市</option> `; } // 清空区县下拉框的选项 districtSelect.innerHTML = ` <option value="">请选择区县</option> `; }); ``` 最后,在CSS中设置样式,使得城市和区县下拉框在省份选择后才显示出来: ```css #city, #district { display: none; } #province:not(:focus) + #city, #city:not(:focus) + #district { display: block; } ``` 这样就完成了一个简单的组合式级联选择器。 ### 回答2: 组合式级联选择器是一种在HTML中使用的选择器,允许我们根据元素的关系和属性进行选择和操作。 要实现组合式级联选择器,我们需要结合CSS来进行样式的定义和应用。首先,在HTML的<body>标签中定义一个包含所需元素的父容器 div,如下所示: <div id="parent"> <div class="box"> Box1 </div> <div class="box"> Box2 </div> <div class="box"> Box3 </div> </div> 然后,在CSS样式表中使用组合式级联选择器来选择和操作这些元素。例如,我们可以选择 .box 类的元素,并设置它们的背景颜色为红色,如下所示: #parent .box { background-color: red; } 这个选择器通过 " #parent .box " 的组合式级联选择器,选择了父容器ID为 "parent" 的下面所有的 .box 类的元素。 此外,我们还可以进一步细化选择器匹配的条件。例如,如果我们只想选择父容器ID为 "parent" 的第一个 .box 元素,可以使用如下的组合选择器: #parent .box:first-child { background-color: blue; } 这个选择器通过 ":first-child" 伪类来选中 " #parent .box " 组合选择器匹配的第一个元素,并将其背景颜色设置为蓝色。 总的来说,组合式级联选择器是一种强大的工具,可以帮助我们根据元素的关系和属性来选择和操作HTML元素,从而实现更丰富的样式效果和交互功能。 ### 回答3: 组合式级联选择器是一种在HTML中使用的选择器组合方法,它能够根据多个条件来选择特定的元素。实现组合式级联选择器需要使用CSS来定义选择器并给予相应的样式。 首先,在HTML中定义元素的结构。例如,我们有一个带有以下结构的HTML代码: ``` <div> <select id="select1"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select id="select2"> <option value="A">选项A</option> <option value="B">选项B</option> <option value="C">选项C</option> </select> <p id="result"></p> </div> ``` 接下来,在CSS中定义组合式级联选择器。可以使用“+”来表示相邻选择器,或使用“>”来表示父子关系选择器。例如,我们的组合式级联选择器为: ``` #select1 + #select2 { color: red; } #select1 > option[selected="selected"] { font-weight: bold; } ``` 最后,在JavaScript中编写代码来触发级联效果。可以使用addEventListener来监听元素的change事件,并通过innerHTML将结果显示在指定的p元素上。例如: ``` document.getElementById('select1').addEventListener('change', function() { var select1 = document.getElementById('select1'); var select2 = document.getElementById('select2'); var result = document.getElementById('result'); result.innerHTML = select1.value + ' - ' + select2.value; }); ``` 以上就是使用HTML、CSS和JavaScript实现组合式级联选择器的简单示例。当选择器满足条件时,可以通过CSS来应用相应的样式,并通过JavaScript来获取选择结果并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值