JavaScript是現代互聯網開發不可或缺的技術之一，它與網頁設計緊密結合，常常用來實現網頁的動態交互功能。其中三級聯動是比較常見的功能，比如實現省、市、區的聯動選擇。實現三級聯動的核心是使用JavaScript根據用戶的選擇動態生成選項，下面將通過舉例說明如何實現一個省、市、區的三級聯動選擇。

首先，需要在頁面中添加三個下拉框，分別對應省、市、區，如下所示：

<select name="province" id="province">
<option value=""></option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="廣東省">廣東省</option>
</select>
<select name="city" id="city">
<option value=""></option>
</select>
<select name="area" id="area">
<option value=""></option>
</select>

上面代碼中，省級下拉框中包含了三個省份供用戶選擇，而后兩個下拉框暫不包含任何選項。

接下來，需要寫js代碼來實現三級聯動。首先，給省級下拉框綁定change事件：

var province = document.getElementById('province');
province.onchange = function() {
// 動態生成市級選項
}

當用戶選擇省份時，上面的代碼會觸發change事件，接下來需要根據選擇的省份動態生成市級選項。下面是實現動態生成市級選項的代碼：

var province = document.getElementById('province');
var city = document.getElementById('city');
province.onchange = function() {
city.innerHTML = '';
var options = [];
if (province.value === '北京市') {
options = ['東城區', '西城區', '朝陽區', '海淀區', '豐臺區', '門頭溝區'];
} else if (province.value === '上海市') {
options = ['黃浦區', '盧灣區', '靜安區', '徐匯區', '長寧區', '普陀區'];
} else if (province.value === '廣東省') {
options = ['廣州市', '深圳市', '珠海市', '汕頭市', '韶關市', '佛山市'];
}
for (var i = 0; i < options.length; i++) {
var option = document.createElement('option');
option.value = options[i];
option.text = options[i];
city.add(option);
}
}

上面的代碼首先清空了市級選項，然后根據用戶選擇的省份動態生成市級選項，最后將生成的選項添加到市級下拉框中。

最后，需要根據用戶選擇的市級選項動態生成區級選項。下面是實現動態生成區級選項的代碼：

var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
province.onchange = function() {
city.innerHTML = '';
area.innerHTML = '';
var cityOptions = [];
if (province.value === '北京市') {
cityOptions = ['東城區', '西城區', '朝陽區', '海淀區', '豐臺區', '門頭溝區'];
} else if (province.value === '上海市') {
cityOptions = ['黃浦區', '盧灣區', '靜安區', '徐匯區', '長寧區', '普陀區'];
} else if (province.value === '廣東省') {
cityOptions = ['廣州市', '深圳市', '珠海市', '汕頭市', '韶關市', '佛山市'];
}
for (var i = 0; i < cityOptions.length; i++) {
var option = document.createElement('option');
option.value = cityOptions[i];
option.text = cityOptions[i];
city.add(option);
}
area.innerHTML = '';
};
city.onchange = function() {
area.innerHTML = '';
var areaOptions = [];
if (city.value === '東城區') {
areaOptions = ['交道口街道', '東華門街道', '景山街道', '東四街道', '東直門街道'];
} else if (city.value === '西城區') {
areaOptions = ['德勝街道', '什剎海街道', '西長安街街道', '廣安門街道', '白紙坊街道'];
} else if (city.value === '朝陽區') {
areaOptions = ['三里屯街道', '麥子店街道', '亞運村街道', '大屯街道', '工體街道'];
}
for (var i = 0; i < areaOptions.length; i++) {
var option = document.createElement('option');
option.value = areaOptions[i];
option.text = areaOptions[i];
area.add(option);
}
};

上面的代碼首先清空了區級選項，然后根據用戶選擇的市級選項動態生成區級選項，最后將生成的選項添加到區級下拉框中。

至此，一個省、市、區的三級聯動選擇就實現了。這個例子也讓我們了解到了如何使用JavaScript實現動態生成選項，并與頁面中的下拉框實現聯動效果，這對于需要根據用戶選擇實現動態交互的網站來說是非常有用的。