大家好,今天我和大家分享网页中下拉列表的省市联动。在我们平常填写一些信息时就会有省市联动,就是在第一个下拉列表中选择我们所在的省,后面一个下拉列表显示该省的所有城市。
既然是省市联动,我们就不能把数据直接写到网页上,我们应该通过第一个下拉列表的省动态生成该省的所有城市。我们可以先定义一个JSON对象表示省,在对象中定义一个数组存储一个省中的所有城市(这里的城市也是JSON对象),最后用数组存储所有的省。我们可以利用JavaScript在网页上面添加选项option。联动这块我们可以为第一个下拉列表添加一个change
事件,当它改变时后一个下拉列表的就更新为当前省的所有城市。
首先我们需要省市的数据:就是一个包含所有省的数组,而且每个省中有一个城市数组。这里我是写北京为例子。
var data = [
{
"province": "北京",
"city": [
{
"cname": "北京",
"code": "101010100"
},
{
"cname": "朝阳",
"code": "101010300"
},
{
"cname": "顺义",
"code": "101010400"
},
{
"