Javascript implements multiple selection of provinces and cities

With the accelerated development of the information age, the Internet has become an indispensable part of our lives. It has become a necessary habit for people to use the Internet through computers, mobile phones and other devices in their daily lives. In web design, the function of multiple selection of provinces and cities is often involved, which requires us to use JavaScript to implement it.

1. Implementation Ideas

In the process of realizing the multi-select function of provinces and cities, we need to use multiple drop-down menus. Each drop-down menu corresponds to a level of region, among which the top-level drop-down menu To select a province, the option in the drop-down menu is the province name; when the user selects the province, the following drop-down menu will be dynamically generated to display all the urban areas in the province, and the urban name is the option in the drop-down menu; when the user selects the province After a city is selected, the drop-down menu below will be generated again to display all counties in the city, and the county names are the options in the drop-down menu.

In view of the idea of ​​​​implementing this function, we can use some JavaScript libraries to improve coding efficiency, such as jQuery and other libraries.

2. Implementation method

1. Component structure

Before realizing this function, we first need to build a component structure. The component structure may vary according to actual needs. Here we use a more common way to implement it, as shown below:

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

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

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

In this component structure, we first define three drop-down menu components , corresponding to "province", "city" and "region" respectively. Here we set the id attributes for them respectively to facilitate subsequent operations.

2. Province data

Before implementing the province multi-selection function, we need to prepare the province data first, that is, store all the province names in an array, so that when rendering Only when there is a province drop-down menu can the user make a selection. For the convenience of Javascript implements multiple selection of provinces and citiesnstration, here we directly define an array to store province data.

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

In the above code, we define a province array, which contains all provinces and their value values. This value value is used to distinguish each province.

3. Rendering the province drop-down menu

After we have the province data, we need to render the province drop-down menu through JavaScript code. We can achieve this operation through libraries such as 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);
}

With the above code snippet, we can render province data into the province drop-down menu. Here we use a for loop to traverse, and then insert the traversal results into the province drop-down menu in the form of tags.

4. Rendering city drop-down menu

When the user selects a province, we need to dynamically generate all the cities in the province based on the currently selected province. Implementing this operation also requires the use of libraries such as jQuery. The implementation of this operation needs to be divided into two steps: the first step is to obtain the currently selected province; the second step is to dynamically generate a city drop-down menu based on the province information. The specific operation is as follows:

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);
}

In this code snippet, we first define the city data, which includes all cities and their value values. Then during the process of traversing the city data, we use the if statement to determine whether the current traversed item belongs to the currently selected province. If it does, it will be rendered into the city drop-down menu.

5. Rendering the district and county drop-down menu

After obtaining the city selected by the user, we need to dynamically generate all districts and counties of the city based on the currently selected city. The code to implement this operation is as follows:

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);
}

In this code segment, we first define the district and county data, including all districts and counties and their value values. Then during the process of traversing the district and county data, the if statement is also used to determine whether the current traversed item belongs to the currently selected city. If it does, it is rendered to the district and county drop-down menu.

6. Code summary

Integrating the above codes together, we can realize multiple selections of provinces and cities. The complete code is as follows:

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);
});

三, Implementation effect

Through the implementation of the above code, we can get a complete multiple-select example of provinces and cities, as shown in the figure below:

At this point, We have completed the implementation of the multi-selection function for provinces and cities.

In general, it is not difficult to implement the multi-select function of provinces and municipalities. It only requires some simple code operations to realize this function. In actual projects, we only need to appropriately adjust the code structure according to specific needs to achieve more complex and rich multi-select functions for provinces and cities.

The above is the detailed content of Javascript implements multiple selection of provinces and cities. For more information, please follow other related articles on the PHP Chinese website!