溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js實現二級聯動的具體代碼，供大家參考，具體內容如下
此實例是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。
實現思路：先寫兩個<select>標簽，用name或id來區分；寫一個二維數組來存放信息；在一級菜單中使用onchange()事件來動態加載二級菜單的內容。
完整代碼
<html>
<head>
<meta charset="UTF-8">
<title>簡單城市二級聯動</title>
</head>
<body>
<form action="" method="post" name="form1">
<div id="province">
<select name="sltProvince" οnchange="selectCity()">
<option value="">請選擇省份</option>
<option value="">山西省</option>
<option value="">陜西省</option>
<option value="">江西省</option>
<option value="">四川省</option>
</select>
</div>
<div id="city">
<select name="sltCity">
<option value="0">請選擇市區</option>
</select>
</div>
</form>
</body>
<script type="text/javascript" language="javascript">
var cityInfo = [["請選擇市區","太原市","呂梁市","臨汾市","運城市","陽泉市"],
["請選擇市區","西安市","咸陽市","漢中市","延安市","榆林市"],
["請選擇市區","南昌市","九江市","鷹潭市","上饒市","景德鎮市"],
["請選擇市區","成都市","綿陽市","雅安市","樂山市","眉山市"]];
/*二級聯動一般使用onchange事件*/
function selectCity(){
/*獲取省份下拉框的對象*/
var pro = document.form1.sltProvince;
/*獲取市區下拉框的對象*/
var cit = document.form1.sltCity;
/*得到對應得城市數組，selectedIndex表示下拉框列表的索引值*/
var selectParam = cityInfo[pro.selectedIndex-1];
/*將城市列表的選項只留下第一個提示選項*/
cit.length = 1;
for(var i=0;i<selectParam.length;i++){
/*第一個selectParam[i]表示城市option中的value值，第二個selectParam[i]表示文本信息*/
cit[i] = new Option(selectParam[i],selectParam[i]);
}
}
</script>
</html>
希望對大家有所幫助！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
