HTML的JS三級下拉菜單是一種文本互動效果，能夠幫助用戶快速瀏覽信息并選擇需要的選項。本文將通過使用pre標簽來展示三級下拉菜單的代碼。

<script language="JavaScript">
var province = new Array("北京", "湖南", "廣東"); //第一級
var city = new Array();
city[0] = new Array("朝陽", "海淀", "豐臺"); //第二級
city[1] = new Array("長沙", "株洲", "湘潭");
city[2] = new Array("廣州", "深圳", "珠海");
var district = new Array();
district[0] = new Array("朝青", "管莊", "三環(huán)以內(nèi)"); //第三級
district[1] = new Array("雨花區(qū)", "岳麓區(qū)", "開福區(qū)");
district[2] = new Array("天河區(qū)", "番禺區(qū)", "南沙區(qū)");
function provinceChange() //第一級下拉框的改變事件
{
var provinceCity = document.getElementById("provinceCity");
var provinceIndex = provinceCity.selectedIndex;
var cityOptions = provinceCity.options;
city.length = 0;
for (var i = 0; i < cityOptions.length; i++) //清空第二級下拉框
{
cityOptions[i] = null;
}
for (var i = 0; i < city[provinceIndex].length; i++) //將第二級下拉框的值顯示出來
{
city[i] = new Option();
city[i].text = city[provinceIndex][i];
city[i].value = city[provinceIndex][i];
provinceCity.add(city[i]);
}
cityChange(); //觸發(fā)第二級下拉框的改變事件
}
function cityChange() //第二級下拉框的改變事件
{
var cityDistrict = document.getElementById("cityDistrict");
var cityIndex = cityDistrict.selectedIndex;
var districtOptions = cityDistrict.options;
district.length = 0;
for (var i = 0; i < districtOptions.length; i++) //清空第三級下拉框
{
districtOptions[i] = null;
}
for (var i = 0; i < district[cityIndex].length; i++) //將第三級下拉框的值顯示出來
{
district[i] = new Option();
district[i].text = district[cityIndex][i];
district[i].value = district[cityIndex][i];
cityDistrict.add(district[i]);
}
}
</script>
<select id="provinceCity" onchange="provinceChange()">
<option value="-1">請選擇省份</option>
<script language="JavaScript">
for (var i = 0; i < province.length; i++) //循環(huán)顯示第一級下拉框的值
{
document.write("<option value='" + province[i] + "'>" + province[i] + "</option>");
}
</script>
</select>
<select id="cityDistrict" onchange="cityChange()">
<option value="-1">請選擇城市</option>
</select>

在這個例子中，我們通過使用JavaScript來創(chuàng)建三個數(shù)組以存儲省、市、區(qū)的信息。這些數(shù)組將用于填充下拉框的值。我們還定義了兩個函數(shù)來響應(yīng)下拉框的選擇：第一個函數(shù)用于更新第二級的下拉框，并觸發(fā)第二個函數(shù)來更新第三級下拉框。

我們還將兩個下拉框的id設(shè)置為“provinceCity”和“cityDistrict”，并使用onchange事件將這些下拉框與對應(yīng)的JavaScript函數(shù)關(guān)聯(lián)起來。

最后，在JavaScript中使用document.write和內(nèi)聯(lián)的for循環(huán)展示第一級下拉框中的省份選項。

通過使用HTML的JS三級下拉菜單，提供用戶快速、簡潔的瀏覽和選擇選項，可以方便用戶獲取信息和完成目標。這種技術(shù)將在很多網(wǎng)站的交互效果中發(fā)揮重要作用。