纯javascript 三级联动效果【结合别人代码学习】
代码示例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>三级联动学习</title> 6 <script src="js/json/CityJson.js"></script> 7 <script src="js/json/DistrictJson.js"></script> 8 <script src="js/json/ProJson.js"></script> 9 <script type="text/javascript"> 10 var initSelect = function(_ttmProvince, _ttmCity, _ttmDistrict, 11 defaultProvince, defaultCity, defaultDistrict) { 12 var ttmProvince = document.getElementById(_ttmProvince); //省/市对象 13 var ttmCity = document.getElementById(_ttmCity); //城市对象 14 var ttmDistrict = document.getElementById(_ttmDistrict); //地区对象 15 16 /** 17 * 添加select 中的 option 对象 18 * @param ttm select对象 19 * @param value 对象 名称 20 * @param obj 对象 子类集合 21 * @param id 对象 id 22 */ 23 function addOption(ttm, value, obj, id) { 24 var option = document.createElement("OPTION"); //创建一个option元素 25 ttm.options.add(option); //ttm 对象中添加 新创建option元素 26 option.value = value + "_" + id; //设置 option元素 value属性值 27 option.text = value; //设置 option元素 文本内容 28 option.obj = obj; //设置 option元素 拥有的的 子类集合 29 } 30 31 32 /** 33 * 省份id 获取城市集合 34 * @param provinceId 对象 id 35 */ 36 function fetchProvince(provinceId) { 37 var _city = []; //创建一个数组 38 var _cityNumber = 0; //创建一个获取城市数量的 标示 39 //循环遍历 'city' 对象 40 for (var c = 0; c < city.length; c++) { 41 //[测试] alert(city[c].ProID + "\t" + city[c].CityName + "\t" + provinceId + "\t" + (city[c].ProID == provinceId)); 42 //对象id 是否与 city 对象中的外键[注意:这里的 '外键' 是个人为了容易理解]对应 43 if (city[c].ProID == provinceId) { 44 _city[_cityNumber] = city[c]; //数组添加一个 'city' 对象 45 _cityNumber++; //标示数量递增一 46 } 47 } 48 //[测试]alert(_city.length); 49 return _city; //返回保存 'city' 对象数组 50 } 51 52 /** 53 * 城市id 获取地区集合 54 * @param cityId 对象 id 55 */ 56 function fetchCity(cityId) { 57 var _district = []; //创建一个数组 58 var _districtNumber = 0; //创建一个获取地区数量的 标示 59 //循环遍历 'District' 对象 60 for (var d = 0; d < District.length; d++) { 61 //[测试]alert(District[d].CityID + "\t" + District[d].DisName + "\t" + cityId + (District[d].CityID==cityId)); 62 //对象id 是否与 'District' 对象中的外键 [注意:这里的 '外键' 是个人为了容易理解] 对应 63 if (District[d].CityID == cityId) { 64 //[测试]alert(District[d].DisName); 65 _district[_districtNumber] = District[d]; //数组添加一个 'city' 对象 66 _districtNumber++; //标示数量递增一 67 } 68 } 69 //[测试]alert(_district.length); 70 return _district; //返回保存 'city' 对象数组 71 } 72 73 /** 74 * 获取 下拉选项选中的索引位置 75 * @param ttm select对象 76 * @param str 默认值 省份/城市/地区 77 */ 78 function fetchSelect(ttm, str) { 79 //循环遍历select对象中的 option数量 80 for (var t = 0; t < ttm.length; t++) { 81 var _value = ttm.options[t].value.split("_")[0]; //截取option value属性值获取与option 文本内容相同的字符串 82 //截取字符串与默认值是否相等 83 if (_value == str) { 84 ttm.selectedIndex = t; //获取对应option角标 设置 select对象索引位置 85 return; 86 } 87 } 88 } 89 90 /** 91 * 改变城市功能 92 */ 93 function changeCity() { 94 ttmDistrict.options.length = 0; //清除城市option数量 为 0 95 ttmDistrict.onchange = null; //取消省份下拉选项元素onchange事件绑定效果 96 97 if (ttmCity.selectedIndex == -1) { 98 return; 99 } 100 var item = ttmCity.options[ttmCity.selectedIndex].obj; //获取 对于对象的子类集合 101 for (var c = 0; c < item.length; c++) { 102 //alert("" + item[c].DisName); 103 addOption(ttmDistrict, item[c].DisName, null, District[c].Id); 104 } 105 fetchSelect(ttmCity, defaultCity); 106 } 107 108 /** 109 * 改变省份 110 */ 111 function changeProvince() { 112 ttmCity.options.length = 0; //清除城市option数量 为 0 113 ttmCity.onchange = null; //取消城市下拉选项元素onchange事件绑定效果 114 //是否选中索引 115 if (ttmProvince.selectedIndex == -1) { 116 return; 117 } 118 //[测试]alert(ttmProvince.selectedIndex + "\t" + ttmProvince.options[ttmProvince.selectedIndex].obj.length); 119 var item = ttmProvince.options[ttmProvince.selectedIndex].obj; 120 for (var i = 0; i < item.length; i++) { 121 addOption(ttmCity, item[i].CityName, fetchCity(item[i].CityID), city[i].CityID); 122 } 123 fetchSelect(ttmCity, defaultCity); 124 changeCity(); 125 ttmCity.onchange = changeCity; //对应对象onchange事件绑定 函数 126 } 127 128 //循环遍历 'privince' 对象 129 for (var x = 0; x < province.length; x++) { 130 addOption(ttmProvince, province[x].ProName, fetchProvince(province[x].ProID), province[x].ProID); 131 } 132 fetchSelect(ttmProvince, defaultProvince); 133 changeProvince(); 134 ttmProvince.onchange = changeProvince; //对应对象onchange事件绑定 函数 135 } 136 </script> 137 </head> 138 139 <body> 140 <select id="ttmProvince"></select> 141 <select id="ttmCity"></select> 142 <select id="ttmDistrict"></select> 143 <script> 144 initSelect('ttmProvince', 'ttmCity', 'ttmDistrict'); 145 </script> 146 </body> 147 </html>
浙公网安备 33010602011771号