JavaScript实现城市选择控件的效果

实现城市选择控件的效果可以分为以下几个步骤：

1. 编写HTML代码

通过HTML代码，我们可以创建城市选择控件需要的元素。示例代码如下：

<input type="text" id="city-picker" placeholder="请选择省/市/区" readonly>
<div class="city-picker-container">
  <div class="city-picker-tab">
    <div class="tab-item active">省份</div>
    <div class="tab-item">城市</div>
    <div class="tab-item">区县</div>
  </div>
  <div class="city-picker-content">
    <div class="content-item active">
      <ul class="province-list">
        <li data-code="110000">北京市</li>
        <li data-code="120000">天津市</li>
        <li data-code="310000">上海市</li>
        <li data-code="440000">广东省</li>
        <li data-code="330000">浙江省</li>
        <li data-code="420000">湖北省</li>
        <li data-code="410000">河南省</li>
        <li data-code="320000">江苏省</li>
        <li data-code="130000">河北省</li>
        <li data-code="210000">辽宁省</li>
      </ul>
    </div>
    <div class="content-item">
      <ul class="city-list"></ul>
    </div>
    <div class="content-item">
      <ul class="district-list"></ul>
    </div>
  </div>
</div>

在上面的代码中，我们定义了一个文本输入框和一个城市选择控件的容器，容器中包含两部分内容：标签栏和内容区域。标签栏用于切换各个选项卡，内容区域显示省、市、区的列表。

2. 编写CSS代码

编写CSS代码用于美化页面，使城市选择控件更加美观。示例代码如下：

.city-picker-container {
  position: relative;
  margin-top: 5px;
  width: 300px;
}

.city-picker-tab {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
}

.tab-item {
  padding: 10px;
  width: 33.33333%;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.tab-item.active {
  background-color: #f7f7f7;
}

.city-picker-content {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  z-index: 999;
  border: 1px solid #ccc;
  border-top: none;
  display: none;
}

.content-item {
  display: none;
}

.content-item.active {
  display: block;
}

.province-list,
.city-list,
.district-list {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.province-list li,
.city-list li,
.district-list li {
  padding: 10px 5px;
  cursor: pointer;
}

.province-list li:hover,
.city-list li:hover,
.district-list li:hover {
  background-color: #f7f7f7;
}

在上面的代码中，我们定义了容器、标签栏、内容区域的样式以及省、市、区列表的样式。

3. 添加交互逻辑

接下来，我们需要添加JavaScript代码以实现控件的交互逻辑。首先，我们需要监听文本输入框的点击事件，当点击文本输入框时，显示城市选择控件。

var cityPicker = document.querySelector('#city-picker');
var container = document.querySelector('.city-picker-container');
var tabs = document.querySelectorAll('.tab-item');
var contents = document.querySelectorAll('.content-item');
var provinceList = document.querySelector('.province-list');
var cityList = document.querySelector('.city-list');
var districtList = document.querySelector('.district-list');

cityPicker.onclick = function() {
  container.style.display = 'block';
};

在上面的代码中，我们通过querySelector方法获取了城市选择控件需要的各个元素，并监听文本输入框的点击事件。当点击文本输入框时，设置城市选择控件的容器可见。

接着，我们需要监听标签栏的点击事件，当点击不同的标签时，切换到对应的内容区域。

for (var i = 0; i < tabs.length; i++) {
  tabs[i].index = i;
  tabs[i].onclick = function() {
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
      contents[j].classList.remove('active');
    }
    this.classList.add('active');
    contents[this.index].classList.add('active');
  }
}

在上面的代码中，我们遍历了标签栏的所有元素，并监听每个标签的点击事件。当点击某个标签时，移除所有标签和内容区域的active类，然后给当前标签和对应的内容区域添加active类。

最后，我们需要填充省、市、区列表的数据，并实现联动效果。例如，当选中某个省份时，刷新城市列表并显示城市列表。示例代码如下：

var cityData = {
  110000: [
    {
      code: 110100,
      name: '北京市'
    }
  ],
  120000: [
    {
      code: 120100,
      name: '天津市'
    }
  ],
  310000: [
    {
      code: 310100,
      name: '上海市'
    }
  ],
  440000: [
    {
      code: 440100,
      name: '广州市'
    },
    {
      code: 440200,
      name: '韶关市'
    },
    {
      code: 440300,
      name: '深圳市'
    },
    {
      code: 440400,
      name: '珠海市'
    },
    {
      code: 440500,
      name: '汕头市'
    }
  ],
  330000: [
    {
      code: 330100,
      name: '杭州市'
    },
    {
      code: 330200,
      name: '宁波市'
    },
    {
      code: 330300,
      name: '温州市'
    },
    {
      code: 330400,
      name: '嘉兴市'
    },
    {
      code: 330500,
      name: '湖州市'
    }
  ],
  420000: [
    {
      code: 420100,
      name: '武汉市'
    },
    {
      code: 420200,
      name: '黄石市'
    },
    {
      code: 420300,
      name: '十堰市'
    },
    {
      code: 420400,
      name: '宜昌市'
    },
    {
      code: 420500,
      name: '襄阳市'
    }
  ],
  410000: [
    {
      code: 410100,
      name: '郑州市'
    },
    {
      code: 410200,
      name: '开封市'
    },
    {
      code: 410300,
      name: '洛阳市'
    },
    {
      code: 410400,
      name: '平顶山市'
    },
    {
      code: 410500,
      name: '安阳市'
    }
  ],
  320000: [
    {
      code: 320100,
      name: '南京市'
    },
    {
      code: 320200,
      name: '无锡市'
    },
    {
      code: 320300,
      name: '徐州市'
    },
    {
      code: 320400,
      name: '常州市'
    },
    {
      code: 320500,
      name: '苏州市'
    }
  ],
  130000: [
    {
      code: 130100,
      name: '石家庄市'
    },
    {
      code: 130200,
      name: '唐山市'
    },
    {
      code: 130300,
      name: '邯郸市'
    },
    {
      code: 130400,
      name: '邢台市'
    },
    {
      code: 130500,
      name: '保定市'
    }
  ],
  210000: [
    {
      code: 210100,
      name: '沈阳市'
    },
    {
      code: 210200,
      name: '大连市'
    },
    {
      code: 210300,
      name: '鞍山市'
    },
    {
      code: 210400,
      name: '抚顺市'
    },
    {
      code: 210500,
      name: '本溪市'
    }
  ]
};

function refreshCityList(provinceCode) {
  cityList.innerHTML = '';
  var cities = cityData[provinceCode];
  for (var i = 0; i < cities.length; i++) {
    var city = cities[i];
    var li = document.createElement('li');
    li.innerHTML = city.name;
    li.setAttribute('data-code', city.code);
    cityList.appendChild(li);
  }
}

provinceList.onclick = function(e) {
  if (e.target.tagName.toLowerCase() === 'li') {
    var provinceCode = e.target.getAttribute('data-code');
    e.target.parentNode.querySelector('.active').classList.remove('active');
    e.target.classList.add('active');
    refreshCityList(provinceCode);
    tabs[0].classList.remove('active');
    tabs[1].classList.add('active');
    contents[0].classList.remove('active');
    contents[1].classList.add('active');
  }
};

cityList.onclick = function(e) {
  if (e.target.tagName.toLowerCase() === 'li') {
    var cityCode = e.target.getAttribute('data-code');
    e.target.parentNode.querySelector('.active').classList.remove('active');
    e.target.classList.add('active');
    // TODO: 刷新区县列表
    tabs[1].classList.remove('active');
    tabs[2].classList.add('active');
    contents[1].classList.remove('active');
    contents[2].classList.add('active');
  }
};

在上面的代码中，我们定义了城市数据和刷新城市列表的方法。当选中某个省份时，调用refreshCityList方法刷新城市列表并显示城市列表。当选中某个城市时，刷新区县列表并显示区县列表。

至此，我们已经完成了JavaScript实现城市选择控件的效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现城市选择控件的效果 - Python技术站

JavaScript实现城市选择控件的效果

1. 编写HTML代码

2. 编写CSS代码

3. 添加交互逻辑

相关文章