-
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body onload="init()"> <!-- 省市联动 --> <select class="province"></select> <select class="city"></select> <script> /** * 数据结构: * 有很多的省份 * 每个省份下有很多的市 * * [{ province_name:"河北", * cities:["石家庄","保定","唐山","秦皇岛"...] * }, * * { province_name:"河北", * cities:["石家庄","保定","唐山","秦皇岛"...] * }, * * { province_name:"河北", * cities:["石家庄","保定","唐山","秦皇岛"...] * }] */ var province_arr = [ { province_name:"北京", cities:["海淀区","朝阳区","丰台区","怀柔区"] }, { province_name:"河北省", cities:["石家庄","唐山","保定","秦皇岛","衡水","沧州"] }, { province_name:"河南省", cities:["郑州","安阳","信阳","濮阳","洛阳","驻马店"] }, { province_name:"山东省", cities:["菏泽","青岛","济南","烟台","威海","德州","济宁"] } ] // 获取省份的下拉菜单 var province_select = document.querySelector(".province") // 获取市的下拉菜单 var city_select = document.querySelector(".city") // 页面初始化的时候 加载所有的省份 与第一个省份对应的市 function init(){ // 遍历数组 获取所有的省份 for(var i = 0; i < province_arr.length; i++){ //province_arr[i] 小对象 要获取省份的名字 需要在对象中提取 // 有一个省份 就在下拉菜单中有一个选项 就相当于有一个option的元素 // 在HTML上有一个option标签 就有一个option对象 var option = new Option(province_arr[i].province_name, province_arr[i].province_name) // 添加在指定的下拉菜单上 province_select.appendChild(option) } // 获取第一省份下的所有市 添加在市的下拉菜单中 var cities = province_arr[0].cities // 对其进行遍历 添加到市的下拉菜单中 for(var i = 0; i < cities.length; i++){ var option = new Option(cities[i], cities[i]) city_select.appendChild(option) } } // 省份的数据发生变化 province_select.onchange = function(e){ // 更新市的下拉菜单发生对应的变化 // 用户选择的省份是哪个???? // 下拉菜单有一个属性 selectedIndex 获取的是被选中项目的索引 // 根据这个索引获取选择的省份 var province = province_arr[this.selectedIndex] // 获取该省份下的所有市 var cities = province.cities // 在选择省份 更新市的下拉菜单时 市之前的选项应该给移除掉 // 否则 数据全部叠加在一起了 // 下拉菜单有一个属性 length 获取的下拉菜单中选项的数量 // length市可以获取 也可以重置的 city_select.length = 0 // 对其进行遍历 添加到市的下拉菜单中 for(var i = 0; i < cities.length; i++){ var option = new Option(cities[i], cities[i]) city_select.appendChild(option) } } </script> </body> </html>
HTML——JS—表单的change事件
最新推荐文章于 2024-06-29 19:21:44 发布