javascript实现省市多选-前端问答-PHP中文网

随着信息化时代的加速发展，互联网已经成为我们生活中必不可少的一部分，人们在日常生活中通过电脑、手机等设备使用互联网，已经成为一种必要的习惯。而在网页设计中，经常会涉及到省市多选的功能，这就需要我们使用 JavaScript 来实现。

一、实现思路

在实现省市多选功能的过程中，我们需要用到多个下拉菜单，每个下拉菜单对应一个级别的地区，其中顶层下拉菜单为省份选择，下拉菜单中的选项为省份名称；当用户选择了省份后，下面的下拉菜单就会动态生成，以显示该省份中所有的市区，市区名称为下拉菜单的选项；当用户选中某市后，下面的下拉菜单就会再次生成，以显示该市区中的所有县区，县区名称为下拉菜单的选项。

针对该功能实现的思路，我们可以采用一些 JavaScript 库来提高编码效率，如 jQuery 等库。

二、实现方式

组件结构

在实现该功能之前，我们首先需要搭建一个组件结构。组件结构可能会根据实际需要而有所不同，这里我们采用一种比较常见的方式来进行实现，如下所示：

<div>
  <select id="province">
    <option value="">请选择省份</option>
  </select>

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

  <select id="district">
    <option value="">请选择区域</option>
  </select>
</div>

登录后复制

该组件结构中，我们首先定义了三个下拉菜单组件，分别对应“省份”、“城市”以及“区域”。这里我们分别为它们设置了 id 属性，以方便后续的操作。

省份数据

在实现省份多选功能之前，我们需要先准备好省份数据，即将所有的省份名称存储在一个数组中，这样在渲染省份下拉菜单时，才能够让用户进行选择。为了演示方便，这里我们直接定义一个数组来存储省份数据。

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

登录后复制

在上述代码中，我们定义了一个省份数组，它包含了所有的省份以及它们的 value 值，这个 value 值是用来区分每个省份的。

渲染省份下拉菜单

有了省份数据之后，接下来我们就需要通过 JavaScript 代码来渲染省份下拉菜单了。我们可以通过 jQuery 等库来实现这个操作。

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

登录后复制

通过上述代码段，我们可以将省份数据渲染到省份下拉菜单中。这里我们采用了一个 for 循环来进行遍历，然后将遍历结果用

渲染城市下拉菜单

当用户选择了某个省份之后，我们就需要根据当前选择的省份，来动态生成该省份的所有城市。实现该操作同样需要用到 jQuery 等库。该操作的实现需要分为两步：第一步是获取当前选择的省份；第二步是根据省份信息，动态生成城市下拉菜单。具体操作如下：

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

登录后复制

在该代码段中，我们首先定义了城市数据，包含了所有的城市以及它们的 value 值。然后在遍历城市数据的过程中，我们通过 if 语句来判断当前遍历项是否属于当前选择的省份，如果属于，则将它渲染到城市下拉菜单中。

渲染区县下拉菜单

获取到用户选择的城市之后，我们就需要根据当前选择的城市，来动态生成该城市的所有区县。实现该操作的代码如下：

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

登录后复制

在该代码段中，我们首先定义了区县数据，包含了所有的区县以及它们的 value 值。然后在遍历区县数据的过程中，同样通过 if 语句来判断当前遍历项是否属于当前选择的城市，如果属于，则将它渲染到区县下拉菜单中。

代码汇总

将上述代码整合在一起，我们就可以实现省市区多选了，完整代码如下：

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

renderProvince();

$('#province').change(function () {
  var provinceValue = $(this).val();
  renderCity(provinceValue);
  renderDistrict('');
});

$('#city').change(function () {
  var cityValue = $(this).val();
  renderDistrict(cityValue);
});

登录后复制

三、实现效果

通过上述代码的实现，我们可以得到一个完整的省市区多选示例，如下图所示：

demo