js 二级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function fn() { var select = document.getElementById("city"); //获得城市 元素对象 var c = select.value; //获得选择的值value="" var area = document.getElementById("area"); //获得区域 元素对象 switch (c) { //条件语句 case "jx": area.innerHTML = "<option>抚州市</option><option>南昌市</option><option>赣州市</option><option>宜春市</option>"; break; case "gd": area.innerHTML = "<option>广州市</option><option>韶关市</option><option>佛山市</option><option>东莞市</option>"; break; case "fj": area.innerHTML = "<option>泉州市</option><option>厦门市</option><option>福州市</option><option>漳州市</option>"; break; case "hn": area.innerHTML = "<option>长沙市</option><option>湘潭市</option><option>乐昌市</option><option>郴州市</option>"; break; default: alert("error"); } }; </script> </head> <body> <select id="city" onchange="fn()"> <!--下拉框的改变事件--> <option value="jx">江西</option> <option value="gd">广东</option> <option value="fj">福建</option> <option value="hn">湖南</option> </select> <select id="area"> <option>抚州市</option> <option>南昌市</option> <option>赣州市</option> <option>宜春市</option> </select> </body> </html>
2.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <select id="one"> <option>请输入省份</option> </select> <select id="two"> <option>请输入市</option> </select> <select id="three"> <option>请输入区</option> </select> <script type="text/javascript"> var oone = document.getElementById("one"); //获得下拉框元素对象 var otwo = document.getElementById("two"); //获得下拉框元素对象 var three = document.getElementById("three");//... var str = ''; //定义一个空字符串 otwo.disabled = true; //禁用元素 three.disabled = true; //禁用元素 //包含多个个对象的数组 var arr1 = [ { "id": "1", "value": "北京" }, { "id": "2", "value": "上海" }, { "id": "3", "value": "重庆" }, { "id": "4", "value": "天津" }, { "id": "5", "value": "山东" } ]; for (var i = 0; i < arr1.length; i++) { //遍历这个对象数组 str += "<option value=" + arr1[i].id + ">" + arr1[i].value + "</option>" } oone.innerHTML = str; //添加下拉框1 【添加内容】 var arr2 = { //json对象 ,这是一个拥有一个1【多个数组】的对象 '1': ['101@北京'], '2': ['201@上海'], '3': ['301@重庆'], '4': ['401@天津'], '5': ['501@济南', '502@青岛'] }; oone.onchange = function () { //下拉框1内容改变事件 var val = this.value; //获取选择项value值 var arrA = arr2[val]; //调用json对象的值 var str1 = '<option>请输入市</option>'; for (var j = 0; j < arrA.length; j++) { //遍历json对象的值 var aaa = arrA[j].split('@');//分割字符串 返回字符串数组 str1 += "<option value=" + aaa[0] + ">" + aaa[1] + "</option>" } otwo.innerHTML = str1; //下拉框2 【添加内容】 otwo.disabled = false; //下拉框元素启用 three.innerHTML = '<option>请输入区</option>'; //下拉框3 【添加内容】 //three.disabled = 'disabled'; //下拉框3禁用元素 three.disabled = true; //下拉框3禁用元素 } var arr3 = { '101': ['朝阳区', '昌平区'], '201': ['宝山区', '浦东区'], '301': ['不知道'], '401': ['真的不知道'], '501': ['市中区', '历下区', '槐荫区'], '502': ['市南区', '市北区', '崂山区'] }; otwo.onchange = function () { //下拉框2内容改变事件 var val = this.value; //获取选择项value值 var str2 = '<option>请输入区</option>'; for (var l = 0; l < arr3[val].length; l++) { //遍历json对象的值 str2 += "<option >" + arr3[val][l] + "</option>" } three.innerHTML = str2; // //下拉框3 【添加内容】 three.disabled = false; //取消禁用元素 } </script> </body> </html>
