最近在電商網站的開發中，需要在手機端添加一個多級城市選擇器，經查詢后發現可以使用HTML5的datalist元素和JavaScript實現該功能。

首先，需要在HTML中添加datalist元素，并給datalist設置一個id：

<input type="text" list="city">
<datalist id="city">
<option value="北京">
<option value="上海">
<option value="廣州">
<option value="深圳">
</datalist>

以上代碼可以實現一個簡單的單級城市選擇器，用戶輸入時，會進行模糊匹配，并顯示可選項。

接下來，通過JavaScript來實現多級城市選擇器。首先需要準備好城市數據，可以定義一個數組來存儲：

var cityData = [
{
name: '北京',
children: [
{ name: '東城區' },
{ name: '西城區' },
{ name: '朝陽區' },
{ name: '海淀區' },
{ name: '豐臺區' }
]
},
{
name: '上海',
children: [
{ name: '黃浦區' },
{ name: '徐匯區' },
{ name: '長寧區' },
{ name: '靜安區' },
{ name: '普陀區' }
]
},
// 其他城市...
];

其中每個城市都有一個名稱和一個子級數組，子級數組中存儲著該城市的下屬區域。

接下來，定義一個函數，用于根據選擇的城市，動態生成下屬區域的可選項：

function generateOptions(data) {
var options = '';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].name + '">';
if (data[i].children) {
options += generateOptions(data[i].children);
}
options += '</option>';
}
return options;
}

以上代碼通過遞歸的方式，生成了一個可選項列表。如果該城市有子級，則繼續遞歸生成其下屬區域的可選項。

最后，需要監聽用戶選擇城市的事件，當用戶選擇城市時，根據選擇的城市動態生成下屬區域列表：

var input = document.querySelector('input[type="text"]');
input.addEventListener('change', function() {
var selectedCity = this.value;
var cityObj = cityData.find(function(city) {
return city.name === selectedCity;
});
if (cityObj && cityObj.children) {
var options = generateOptions(cityObj.children);
var datalist = document.querySelector('#city');
datalist.innerHTML = options;
}
});

以上代碼監聽了 input 元素的 change 事件，當用戶選擇城市后，根據選中的城市，通過 cityData 查找該城市的數據對象，并使用 generateOptions 函數動態生成該城市下屬區域的可選項，最后將生成的可選項列表設置給 datalist 元素即可。

通過以上代碼，就可以實現一個簡單的HTML5手機端多級城市選擇器，代碼效率高，易于維護，使用起來十分方便。