因工作需要，做了一個下拉單的二級聯動。
第一級是固定的選項，有A、B兩個選項，第二級的選項隨着第一級選項的變化而變化。
一開始是這樣的：
HTML代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>二級聯動</title>
</head>
<body>
<form name="form1" method="post" action="">
<select id="project" onchange="changeSelect()" style="width:100px; margin-left:15px;">
<option value="0">請選擇項目</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<select id="area" style="width:100px; margin-left:15px;">
<option value="">請選擇區域</option>
</select>
</form>
</body>
</html>
JS代碼
<script type="text/javascript">
var area = [ ['x', 'y', 'z'], // 對應A
['m', 'n'], // 對應B
]; function changeSelect() { //獲得項目下拉框的對象
var slt_project = document.form1.project; //獲得升級區域下拉框的對象
var slt_area = document.form1.area; //得到項目對應的升級區域數組
var project_area = area[slt_project.selectedIndex - 1]; //清空升級區域下拉框，僅留提示選項
slt_area.length = 1; //將升級區域數組中的值填充到升級區域下拉框中
for(var i=0; i < project_area.length; i++){ slt_area[i+1] = new Option(project_area[i],project_area[i]); } } </script>
但后來提出需求，第一級選B時，第二級無下拉單，直接顯示“無”即可。
我把JS代碼中area數組改為：
var area = [ ['x', 'y', 'z'], // 對應A
['無'], // 對應B
];
改完后第二級下拉單並沒有默認顯示“無”，依然需要手動選擇。
於是，我把JS代碼中area數組里對應B的數組注釋掉，將HTML代碼中第二級下拉單的option由“請選擇項目”改為“無”：
HTML代碼
<select id="area" style="width:100px; margin-left:15px;">
<option value="0”>無</option> </select>
JS代碼
var area = [ ['x', 'y', 'z'], // 對應A // ['無']
];
選B時倒是直接默認顯示“無”了，可選A以及“請選擇項目”時，第二級也默認顯示的是“無”了，還是不符合要求啊。
我就想，用給option賦值的方法，點擊B時，將第二級默認option的“請選擇區域”替換為“無”，代碼如下：
HTML代碼
// 給第二級下拉單的option添加id <select id="area" style="width:100px; margin-left:15px;">
<option id="option1" value="0">請選擇區域</option>
</select>
JS代碼
<script src="jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript"> $(function () { $("#project").click(function () { var project = $("#project option:selected").val(); var str1 = '<option value="0">請選擇區域</option>'; var str2 = '<option value="0">無</option>'; if (project == "2") { // 選B時，替換為str2
$("#option1").html(str2); } else { // 如果沒有else代碼段，選A時，默認顯示的仍然是“無”
$("#option1").html(str1); } }); }) </script>
改完以后，在Firefox上順利實現此功能，可是在Chrome上，在第一級下單欄中相應選項上點擊兩下，第二級下拉單欄才能替換為相應的文字。
Google了很多資料，都沒解決這個問題，作為前端小白一枚，我放棄了這段實現下拉單二級聯動的代碼方案，捂臉~
后來換了一套JS實現方案，HTML代碼不變。因為是聯動的，變動一級選擇項時，要先清空先前一級選擇項對應的所有二級選擇項，然后再創建新的一級選擇項所對應的二級選擇項。
JS代碼
<script type="text/javascript">
function changeSelect() { // 父選擇項
var parent = document.getElementById("project"); var p_value = parent.value; // 子選擇項的長度，長度大於0，即將所有選擇項清空
var child = document.getElementById("area"); var c_length = child.options.length; if (c_length > 0) { for (var i = 0; i < c_length; i++) { child.options.remove(0); } } // 重創建子選擇項
var area = [ ['請選擇區域', 'x', 'y', 'z'], // 對應A
['無'], // 對應B
['請選擇區域'], // 對應'請選擇區域'
]; if(p_value == "1") { for(var i = 0; i < area[0].length; i++) { addOption(area[0][i]); } } else if (p_value == "2") { addOption(area[1]); } else { addOption(area[2]); } }
function addOption(txt) { var opt = document.createElement("option"); // 創建一個對象
opt.text = txt; opt.value = txt; area.options.add(opt); } </script>
在Firefox和Chrome上測試，均沒問題，大功告成~
仍需改進：第一級下拉單因為選項比較少，是寫死的，也可以寫成數組，然后通過遍歷數組，將數組中的數據寫入option中。