在開發移動端網頁時，一個城市下拉選擇框是不可或缺的。而HTML5為我們提供了好用的下拉菜單功能。下面我們來看一下如何使用HTML5實現手機端城市下拉選擇的代碼。

首先，我們需要在HTML文檔中添加一個下拉菜單元素，并設置城市選項的數值與文本。代碼如下：

<select name="city" id="citySelect">
<option value="">請選擇城市</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen">深圳</option>
</select>

接著，我們需要編寫JavaScript代碼，實現城市下拉選擇的動態功能。代碼如下：

window.onload = function() {
var citySelect = document.getElementById('citySelect');
var cityArray = ['請選擇城市', '上海', '北京', '廣州', '深圳'];
for (var i = 0; i< cityArray.length; i++) {
var option = document.createElement('option');
option.text = cityArray[i];
citySelect.add(option, null);
}
};

以上JavaScript代碼中，我們首先獲取了id為citySelect的下拉菜單元素，并定義了一個城市選項數組cityArray，數組中包含了城市文本和數值。接著我們通過for循環逐個獲取數組中的城市選項，并使用document.createElement創建一個新的option元素，設置option.text為城市文本，最后使用citySelect.add方法將新option元素添加到下拉菜單中。

通過以上代碼，我們就可以輕松地實現手機端城市下拉選擇的功能了。這種方法不僅簡單易懂，而且代碼量也非常少，適合初學者進行學習和使用。