HTML5 城市選擇器源代碼是一個用于網頁上選擇城市的工具，它使用HTML5技術，提供了便捷易用的界面以及可定制的樣式，幫助用戶快速準確地選擇城市信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市選擇</title>
<style type="text/css">
/*自定義的樣式*/
.city{
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
width: 180px;
text-align: center;
cursor: pointer;
}
.city:hover{
border-color: #2980b9;
}
.city .name{
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
.city .code{
font-size: 12px;
color: #999;
}
/*下拉列表*/
.drop-list{
display: none;
position: absolute;
z-index: 999;
border: 1px solid #ccc;
background-color: #fff;
width: 180px;
overflow: auto;
height: 200px;
}
.drop-list li{
padding: 5px;
cursor: pointer;
}
.drop-list li:hover{
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<div class="city">
<div class="name">請選擇城市</div>
<div class="code">請選擇城市代碼</div>
<ul class="drop-list">
<li data-code="110000">北京市</li>
<li data-code="310000">上海市</li>
<li data-code="440100">廣州市</li>
<li data-code="440300">深圳市</li>
<li data-code="320100">南京市</li>
<li data-code="610100">西安市</li>
</ul>
</div>
</body>
<script type="text/javascript">
//城市選擇器腳本
var city = document.querySelector('.city');//城市選擇器
var name = city.querySelector('.name');//城市名稱
var code = city.querySelector('.code');//城市代碼
var list = city.querySelector('.drop-list');//下拉列表
var items = list.querySelectorAll('li');//城市列表
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
var _name = this.innerText;//城市名稱
var _code = this.getAttribute('data-code');//城市代碼
name.innerText = _name;
code.innerText = _code;
list.style.display = 'none';
}
}
city.onclick = function(event){
list.style.display = 'block';
event.stopPropagation();
}
document.onclick = function(){
list.style.display = 'none';
}
</script>
</html>該代碼使用了自定義的CSS樣式，包括城市選擇器的外觀以及下拉列表的樣式，提供了更加美觀優雅的界面。同時，通過JavaScript腳本實現了城市選擇器的交互功能，包括下拉列表的出現與隱藏，以及城市的選擇和顯示。通過該代碼，可以快速地搭建一個城市選擇器，幫助用戶準確地選擇他們需要的城市信息。