南阳公司网站制作,wordpress 自定义post,住房和城乡建设部网站八大员,长沙网页制作团队前言#xff1a;咳咳哈#xff0c;大佬说#xff1a;这不是有手就行了#xff1f;好吧#xff0c;这里不做过多罗里吧嗦#xff0c;真的不过多吹#xff0c;我们在下面直接上代码上注释。 文章目录#xff1a;
原Js二级联动实现原Js三级联动实现 一、二级…前言咳咳哈大佬说这不是有手就行了好吧这里不做过多罗里吧嗦真的不过多吹我们在下面直接上代码上注释。 文章目录
原Js二级联动实现原Js三级联动实现 一、二级联动的实现
第一步
在HTML页面创建两个 select 下拉列表元素并设置id为 ‘province’和id ‘city’
!--省份--
select idprovince onchangegetCity()/select!--城市--
select idcityoption请选择/option
/select
第二步
在HTML创建js标签 script/script 用于写js代码,当然也可以创建一个js文本写js代码我这里纯属是想偷懒所以直接在html页面使用script标签里面写效果一样
好了不啰嗦现在开始写js代码
首先我们要创建 javaScript 对象字面量它是[object literal]的一种形式是用来创建包含键值对的对象可以快速地创建和初始化一个对象不再需要定义一个构造函数 //省市对应数据var data {北京市: [东城区, 西城区, 朝阳区, 海淀区, 丰台区],上海市: [黄浦区, 徐汇区, 长宁区, 静安区, 普陀区],广东省: [深圳市, 广州市, 珠海市, 中山市, 东莞市]};
接下来就是for(var key in data)初始化省份 getElementById(xxx) 获取id createElement(xxx) 创建一个html元素节点 //初始化省份var province document.getElementById(province);for (var key in data) {var option document.createElement(option);option.innerText key;province.appendChild(option);}
创建函数获取城市 //获取城市function getCity() {var provinceName province.value;var city document.getElementById(city);city.innerHTML ;if (data[provinceName]) {for (var i 0; i data[provinceName].length; i) {var option document.createElement(option);option.innerText data[provinceName][i];city.appendChild(option);}}}
写到这里二级联动也就写完了当然还有其他写法也可以同样做到这样的效果在这里也就不一一演示了。 二、三级联动的实现
三级联动的实现要比二级联动实现复杂了一点点但是并不算难
第一
老套路和上面二级联动一样先在HTML创建三个 select/select 下拉列表 select idprovince/selectselect idcityoption请选择/option/selectselect iddistrictoption请选择/option/select第二
和上面一样在html创建script标签然后创建 JavaScript 对象字面量
var data {广东省: {珠海市: [香洲区, 斗门区],广州: [番禺, 黄埔]},仙侠世界: {玄幻大陆: [无敌区, 无人区],科技大陆: [天才区, 学士区]}
}; 1)接下来就是for(var key in data)初始化省份
// 获取省份列表
var province document.getElementById(province);
for (var key in data) {var option document.createElement(option);option.text key;province.add(option);
}
2)根据省份获取城市列表
// 根据省份获取城市列表
function getCity() {var city document.getElementById(city);var district document.getElementById(district);//城市为0当选择了省份的时候才有数据city.options.length 0;var selectedProvince province.options[province.selectedIndex].text;//循环遍历data城市数据到optionfor (var key in data[selectedProvince]) {var option document.createElement(option);option.text key;//添加数据city.add(option);}
}
3)根据城市获取区县列表
// 根据城市获取区县列表
function getDistrict() {var district document.getElementById(district);//区县为0当选择了城市的时候才有数据district.options.length 0;//获取城市var selectedProvince province.options[province.selectedIndex].text;//获取区县var selectedCity city.options[city.selectedIndex].text;//循环遍历for (var i 0; i data[selectedProvince][selectedCity].length; i) {var option document.createElement(option);option.text data[selectedProvince][selectedCity][i];district.add(option);}
}// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.onchange getCity;
city.onchange getDistrict;
总结:
js的二级联动和三级联动有很多种写法我这种写法只是多种写法中的一种我个人认为是比较简洁的一种上面的这些代码多练习几遍也就会写了也不用死记硬背理解就好了实在怕忘记就一键三连吧哈哈
