当前位置：首页 > JavaScript

js实现城市的

2026-02-02 13:54:05JavaScript

城市选择功能的实现方法

使用下拉菜单实现城市选择

创建HTML的select元素配合JavaScript动态加载城市数据，适用于简单的城市选择场景。

<select id="city-select">
  <option value="">请选择城市</option>
</select>

<script>
const cities = [
  {id: 1, name: "北京"},
  {id: 2, name: "上海"},
  {id: 3, name: "广州"}
];

const select = document.getElementById('city-select');
cities.forEach(city => {
  const option = document.createElement('option');
  option.value = city.id;
  option.textContent = city.name;
  select.appendChild(option);
});
</script>

使用现代前端框架实现城市选择

以Vue.js为例，实现响应式的城市选择组件，适合复杂应用场景。

js实现城市的

<template>
  <div>
    <select v-model="selectedCity">
      <option v-for="city in cities" :value="city.id" :key="city.id">
        {{ city.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: null,
      cities: [
        {id: 1, name: "深圳"},
        {id: 2, name: "杭州"},
        {id: 3, name: "成都"}
      ]
    };
  }
};
</script>

实现省市联动选择

通过两级联动的选择框实现省市选择功能，需要准备层级化的地区数据。

const provinceData = {
  "广东省": ["广州", "深圳", "珠海"],
  "江苏省": ["南京", "苏州", "无锡"]
};

function updateCityOptions(province) {
  const citySelect = document.getElementById('city-select');
  citySelect.innerHTML = '<option value="">选择城市</option>';

  if (province && provinceData[province]) {
    provinceData[province].forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
}

document.getElementById('province-select').addEventListener('change', function() {
  updateCityOptions(this.value);
});

使用第三方城市选择组件

推荐使用成熟的第三方库如：

js实现城市的

AMap.CitySearch (高德地图城市选择)
Element UI的Cascader级联选择器
Ant Design的Select组件

这些组件通常提供更完善的UI和功能，包括搜索、拼音支持等特性。

实现带搜索功能的城市选择

结合input元素和datalist实现可搜索的城市选择功能。

<input list="city-list" id="city-input" placeholder="输入城市名">
<datalist id="city-list">
  <!-- 选项将通过JavaScript动态生成 -->
</datalist>

<script>
const allCities = ["北京", "上海", "广州", "深圳", "杭州", "成都"];
const datalist = document.getElementById('city-list');

allCities.forEach(city => {
  const option = document.createElement('option');
  option.value = city;
  datalist.appendChild(option);
});
</script>