자바스크립트를 사용하여 주 및 도시 선택기를 작성하는 방법
- PHPz원래의
- 2023-04-24 15:48:221128검색
사용자의 주 및 도시 선택을 고려해야 하는 웹사이트와 애플리케이션이 점점 더 많아지고 있습니다. 사용자 친화적인 주 및 도시 선택기를 제공하면 사용자의 운영 경험을 향상시킬 수 있을 뿐만 아니라 웹사이트의 사용자 만족도도 높일 수 있습니다. 이 기사에서는 JavaScript를 사용하여 지방 및 도시 선택기를 작성하고 최적화하는 방법을 설명합니다.
1. 수요 분석
사용자가 선택한 지방에 따라 해당 지방의 도시 지역 목록을 동적으로 표시하여 지방 및 도시 캐스케이드 선택을 완료합니다. 동시에 다음 기능을 구현해야 합니다.
- 기본적으로 사용자가 마지막으로 선택한 지방 및 도시 정보를 표시합니다(있는 경우).
- 사용자가 선택을 위해 지방 및 도시 이름을 수동으로 입력할 수 있도록 지원합니다.
- 긴 페이지 응답 시간을 피하기 위해 지방자치단체 데이터의 비동기 로딩을 지원합니다.
2. 데이터 준비
시/도 선택기를 구현하기 위해서는 먼저 해당 데이터를 준비해야 합니다. Alibaba의 지방 및 도시 데이터(http://lbs.amap.com/api/javascript-api/download/)와 같은 타사 데이터 소스를 사용하거나 데이터를 직접 구성할 수 있습니다. 이 기사에서는 Alibaba의 데이터 소스를 예로 사용합니다.
데이터 소스에는 Province.json과 city.json이라는 두 개의 파일이 포함되어 있습니다. Province.json 파일에는 모든 지방의 이름과 번호 정보가 기록됩니다. city.json 파일에는 모든 도시의 이름, 지방 번호, 도시 번호 정보가 기록됩니다. 여기서 주의할 점은 각 도의 도시번호는 1부터 시작한다는 점이다.
3. 인터페이스 디자인
수요 분석을 바탕으로 선택기 인터페이스를 먼저 디자인해야 합니다. 입력 드롭다운 목록과 유사한 형태를 사용하여 지방 및 도시 목록을 표시하고, 사용자가 지방을 선택할 때 해당 지방 아래에 있는 도시 목록을 동적으로 표시할 수 있습니다. CSS를 사용하여 스타일을 설정할 수 있습니다. 구체적인 코드는 다음과 같습니다.
<style>
.city-selector {
position: relative;
display: inline-block;
font-size: 14px;
}
.city-selector input {
border: 1px solid #ccc;
width: 200px;
padding: 5px;
outline: none;
box-sizing: border-box;
}
.city-selector .dropdown {
position: absolute;
top: 100%;
left: 0;
border: 1px solid #ccc;
border-top: none;
background-color: #fff;
width: 200px;
max-height: 200px;
overflow-y: scroll;
z-index: 1;
}
.city-selector .dropdown li {
padding: 5px;
cursor: pointer;
}
.city-selector .dropdown li:hover {
background-color: #f5f5f5;
}
.city-selector .dropdown li.selected {
background-color: #f5f5f5;
font-weight: bold;
}
</style>
<div class="city-selector">
<input type="text" placeholder="请选择省份">
<ul class="dropdown"></ul>
</div>
4. 지방 선택 구현
먼저, Province.json 데이터를 페이지에 동적으로 로드하고 모든 지방의 이름 목록을 렌더링해야 합니다. 사용자가 입력 상자에 콘텐츠를 입력하면 자바스크립트를 통해 해당 지역을 동적으로 일치시키고 일치된 지역 이름을 드롭다운 목록에 렌더링해야 합니다.
<script>
// 定义全局变量，保存province.json数据
var PROVINCES = [];
// 加载province.json数据
fetch('province.json')
.then(response => response.json())
.then(data => {
PROVINCES = data;
renderProvinces();
});
// 渲染所有省份到下拉列表中
function renderProvinces() {
var dropdown = document.querySelector('.city-selector .dropdown');
// 先清空下拉列表
dropdown.innerHTML = '';
// 循环province.json数据，渲染省份名称
PROVINCES.forEach(province => {
var li = document.createElement('li');
li.textContent = province.name;
li.dataset.id = province.id; // 将省份编号存储在data-id中
dropdown.appendChild(li);
});
}
// 监听用户输入事件，动态匹配省份名称
document.querySelector('.city-selector input').addEventListener('input', function() {
var inputValue = this.value.trim();
if (inputValue === '') {
renderProvinces();
return;
}
var dropdown = document.querySelector('.city-selector .dropdown');
var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
dropdown.innerHTML = '';
filteredProvinces.forEach(province => {
var li = document.createElement('li');
li.textContent = province.name;
li.dataset.id = province.id;
dropdown.appendChild(li);
});
});
</script>
5. 도시 계단식 선택 구현
다음으로 도시 계단식 선택 기능을 구현해야 합니다. 사용자가 주를 선택하면 해당 주 아래의 도시 목록을 동적으로 로드하고 드롭다운 목록에 표시해야 합니다.
<script>
// 监听用户选择省份事件，动态加载相应的城市列表
document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
var target = e.target;
if (target.tagName !== 'LI') {
return;
}
// 将用户已选的省份名称和编号存储在input中
var input = document.querySelector('.city-selector input');
input.value = target.textContent;
input.dataset.id = target.dataset.id;
// 加载相应省份下的城市列表
loadCities(target.dataset.id);
});
// 加载相应省份下的城市列表
function loadCities(provinceId) {
fetch('city.json')
.then(response => response.json())
.then(data => {
var cities = data.filter(city => city.provinceId === provinceId);
renderCities(cities);
});
}
// 渲染城市列表到下拉列表中
function renderCities(cities) {
var dropdown = document.querySelector('.city-selector .dropdown');
// 先清空下拉列表
dropdown.innerHTML = '';
// 循环city.json数据，渲染城市名称
cities.forEach(city => {
var li = document.createElement('li');
li.textContent = city.name;
li.dataset.id = city.id; // 将城市编号存储在data-id中
dropdown.appendChild(li);
});
}
</script>
6. 선택기 최적화
지방 및 도시 선택기를 구현한 후에는 사용자의 운영 경험과 페이지 성능을 향상시키기 위해 선택기를 더욱 최적화하는 방법을 고려해야 합니다.
- 사용자가 선택을 위해 지방 및 도시 이름을 수동으로 입력하도록 지원
입력 상자에 지방 및 도시 이름을 입력하여 매칭할 때 사용자가 너무 빨리 입력하여 시기 적절하지 않은 페이지가 발생하는 것을 방지하기 위해 입력 상자에 지연을 설정할 수 있습니다. 응답. 동시에 동일한 데이터를 반복적으로 로드하지 않도록 캐싱 메커니즘을 설정할 수도 있습니다.
<script>
var PROVINCES = [];
var CITIES = {};
var debounceTimer = null;
// 加载province.json数据
function loadProvinces() {
fetch('province.json')
.then(response => response.json())
.then(data => {
PROVINCES = data;
});
}
// 动态匹配省份
function filterProvinces(inputValue) {
var dropdown = document.querySelector('.city-selector .dropdown');
var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
dropdown.innerHTML = '';
filteredProvinces.forEach(province => {
var li = document.createElement('li');
li.textContent = province.name;
li.dataset.id = province.id;
dropdown.appendChild(li);
});
}
// 监听用户输入事件
document.querySelector('.city-selector input').addEventListener('input', function() {
var inputValue = this.value.trim();
if (debounceTimer) {
clearTimeout(debounceTimer);
}
if (inputValue === '') {
renderProvinces();
return;
}
debounceTimer = setTimeout(function() {
if (PROVINCES.length === 0) {
loadProvinces();
} else {
filterProvinces(inputValue);
}
}, 300);
});
// 监听用户选择省份事件，动态加载相应的城市列表
document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
var target = e.target;
if (target.tagName !== 'LI') {
return;
}
var input = document.querySelector('.city-selector input');
input.value = target.textContent;
input.dataset.id = target.dataset.id;
var provinceId = target.dataset.id;
if (CITIES[provinceId]) {
renderCities(CITIES[provinceId]);
} else {
loadCities(provinceId);
}
});
// 加载相应省份下的城市列表
function loadCities(provinceId) {
fetch('city.json')
.then(response => response.json())
.then(data => {
var cities = data.filter(city => city.provinceId === provinceId);
CITIES[provinceId] = cities;
renderCities(cities);
});
}
</script>
- 지방 및 지방자치단체 데이터의 비동기 로딩 지원
페이지가 로드되면 필요한 초기 데이터만 로드할 수 있으며 비동기 처리를 위해 지방 및 지방자치단체 데이터의 로딩을 백그라운드에 배치합니다. 사용자가 지방을 선택하면 긴 페이지 응답 시간을 피하기 위해 해당 지방의 도시 데이터를 동적으로 로드합니다.
<script>
var debounceTimer = null;
// 加载所有省份到下拉列表中
function loadProvinces() {
fetch('province.json')
.then(response => response.json())
.then(data => {
renderProvinces(data);
});
}
// 渲染所有省份到下拉列表中
function renderProvinces(provinces) {
var dropdown = document.querySelector('.city-selector .dropdown');
dropdown.innerHTML = '';
provinces.forEach(province => {
var li = document.createElement('li');
li.textContent = province.name;
li.dataset.id = province.id;
dropdown.appendChild(li);
});
}
// 加载相应省份下的城市列表
function loadCities(provinceId) {
fetch('city.json')
.then(response => response.json())
.then(data => {
var cities = data.filter(city => city.provinceId === provinceId);
renderCities(cities);
});
}
// 渲染城市列表到下拉列表中
function renderCities(cities) {
var dropdown = document.querySelector('.city-selector .dropdown');
dropdown.innerHTML = '';
cities.forEach(city => {
var li = document.createElement('li');
li.textContent = city.name;
li.dataset.id = city.id;
dropdown.appendChild(li);
});
}
// 监听用户输入事件
document.querySelector('.city-selector input').addEventListener('input', function() {
var inputValue = this.value.trim();
if (debounceTimer) {
clearTimeout(debounceTimer);
}
if (inputValue === '') {
loadProvinces();
return;
}
debounceTimer = setTimeout(function() {
fetch('province.json')
.then(response => response.json())
.then(data => data.filter(province => province.name.indexOf(inputValue) >= 0))
.then(filteredData => {
renderProvinces(filteredData);
});
}, 300);
});
// 监听用户选择省份的事件
document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
var target = e.target;
if (target.tagName !== 'LI') {
return;
}
var input = document.querySelector('.city-selector input');
input.value = target.textContent;
input.dataset.id = target.dataset.id;
loadCities(target.dataset.id);
});
// 页面加载时，只加载必要的初始数据
loadProvinces();
</script>
7. 요약
이 글에서는 자바스크립트를 사용하여 지방 및 도시 선택기를 구현하는 방법과 선택기를 최적화하여 사용자의 운영 경험과 페이지 성능을 향상시키는 방법을 소개합니다. 사용자 친화적인 지방 및 도시 선택기를 구현하는 것은 기술적인 문제일 뿐만 아니라 사용자의 습관과 요구 사항은 물론 페이지의 응답 시간과 성능 문제도 고려해야 합니다. 이 기사가 귀하에게 참고 자료와 도움을 제공할 수 있기를 바랍니다.
위 내용은 자바스크립트를 사용하여 주 및 도시 선택기를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!