Javascript는 다양한 지방 및 도시 선택을 구현합니다.-프런트엔드 Q&A-php.cn

정보화 시대가 가속화되면서 인터넷은 우리 삶에 없어서는 안 될 부분이 되었습니다. 일상생활에서 컴퓨터, 휴대폰, 기타 기기를 통해 인터넷을 사용하는 것은 사람들에게 꼭 필요한 습관이 되었습니다. 웹 디자인에서는 지방과 도시를 다중 선택하는 기능이 포함되는 경우가 많으며 이를 구현하려면 JavaScript를 사용해야 합니다.

1. 구현 아이디어

지방 및 도시의 다중 선택 기능을 구현하는 과정에서 각 드롭다운 메뉴는 최상위 수준의 드롭다운 메뉴를 사용해야 합니다. -다운 메뉴는 지방 선택을 위한 것입니다. 사용자가 지방을 선택하면 아래 드롭다운 메뉴가 동적으로 생성되어 지방의 모든 도시 지역을 표시합니다. 드롭다운 메뉴 옵션, 사용자가 도시를 선택하면 아래 드롭다운 메뉴 메뉴가 다시 생성되어 드롭다운 메뉴의 옵션으로 카운티 이름과 함께 도시의 모든 카운티를 표시합니다.

이 기능을 구현한다는 아이디어를 고려하여 jQuery 및 기타 라이브러리와 같은 일부 JavaScript 라이브러리를 사용하여 코딩 효율성을 향상시킬 수 있습니다.

2. 구현 방법

컴포넌트 구조

이 기능을 구현하기 전에 먼저 컴포넌트 구조를 구축해야 합니다. 컴포넌트 구조는 실제 필요에 따라 달라질 수 있습니다. 여기서는 아래와 같이 보다 일반적인 구현 방법을 사용합니다.

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

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

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

로그인 후 복사

이 컴포넌트 구조에서는 먼저 "Province"에 해당하는 세 개의 드롭다운 메뉴 컴포넌트를 정의합니다. "도시"와 "지역". 여기서는 후속 작업을 용이하게 하기 위해 각각에 대한 id 속성을 설정합니다.

지방 데이터

지방 다중 선택 기능을 구현하기 전에 먼저 지방 데이터를 준비해야 합니다. 즉, 지방을 렌더링할 때 사용자가 선택할 수 있도록 모든 지방 이름을 배열로 저장해야 합니다. 드롭 다운 메뉴. 데모의 편의를 위해 여기서는 지방 데이터를 저장할 배열을 직접 정의합니다.

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

로그인 후 복사

위 코드에서는 모든 지방과 그 값을 포함하는 지방 배열을 정의합니다. 이 값은 각 지방을 구별하는 데 사용됩니다.

지방 드롭다운 메뉴 렌더링

지방 데이터를 얻은 후 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);
}

로그인 후 복사

이 코드 조각에서는 먼저 모든 도시와 해당 값 값을 포함하는 도시 데이터를 정의합니다. 그런 다음 도시 데이터를 순회하는 과정에서 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);
}

로그인 후 복사

이 코드 조각에서는 먼저 모든 구역 및 카운티와 해당 값 값을 포함하는 구역 및 카운티 데이터를 정의합니다. 그런 다음 구역 및 카운티 데이터를 순회하는 과정에서 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);
});

로그인 후 복사

3. 구현 효과

위 코드를 구현하면 다음과 같습니다. get a Complete 도 및 자치체 다중 선택의 예는 아래 그림과 같습니다.

Javascript는 다양한 지방 및 도시 선택을 구현합니다.

이 시점에서 도 및 자치체 다중 선택 기능의 구현이 완료되었습니다.

일반적으로 지방 및 도시의 다중 선택 기능을 구현하는 것은 어렵지 않습니다. 이 기능을 구현하려면 몇 가지 간단한 코드 작업만 필요합니다. 실제 프로젝트에서는 지방 및 도시에 대한 보다 복잡하고 풍부한 다중 선택 기능을 달성하기 위해 특정 요구에 따라 코드 구조를 적절하게 조정하기만 하면 됩니다.

위 내용은 Javascript는 다양한 지방 및 도시 선택을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!