jquery的直接设置下拉框的选中值(jquery实现户籍地选择下拉框)
类别:编程学习 浏览量:556
时间:2022-01-19 00:43:43 jquery的直接设置下拉框的选中值
jquery实现户籍地选择下拉框利用jquery实现户籍地选择下拉框的具体代码,供大家参考,具体内容如下
data.js
var data = [{ provname: '浙江省', provId: 1, citys: [{ cityname: "杭州市", cityId: 101, areas: [{ areaname: "杭州一区", areaId: 1011 }, { areaname: "杭州二区", areaId: 1012 } ] }, { cityname: "温州市", cityId: 102, areas: [{ areaname: '温州一区', areaId: 1021 }, { areaname: '温州二区', areaId: 1022 }] }, { cityname: "宁波市", cityId: 103, areas: [{ areaname: '宁波一区', areaId: 1031 }, { areaname: '宁波二区', areaId: 1032 }] }, { cityname: "绍兴市", cityId: 104, areas: [{ areaname: '绍兴一区', areaId: 1041 }, { areaname: '绍兴二区', areaId: 1042 }] }] }, { provname: '山东省', provId: 2, citys: [{ cityname: "济南市", cityId: 201, areas: [{ areaname: "济南一区", areaId: 2011 }, { areaname: "济南二区", areaId: 2012 } ] }, { cityname: "青岛市", cityId: 202, areas: [{ areaname: '青岛一区', areaId: 2021 }, { areaname: '青岛二区', areaId: 2022 }] }, { cityname: "济宁市", cityId: 203, areas: [{ areaname: '济宁一区', areaId: 2031 }, { areaname: '济宁二区', areaId: 2032 }] }, { cityname: "潍坊市", cityId: 204, areas: [{ areaname: '潍坊一区', areaId: 2041 }, { areaname: '潍坊二区', areaId: 2042 }] }] }, { provname: '广东省', provId: 3, citys: [{ cityname: "广州市", cityId: 301, areas: [{ areaname: "广州一区", areaId: 3011 }, { areaname: "广州二区", areaId: 3012 } ] }, { cityname: "潮阳市", cityId: 302, areas: [{ areaname: '潮阳一区', areaId: 3021 }, { areaname: '潮阳二区', areaId: 3022 }] }, { cityname: "澄海市", cityId: 303, areas: [{ areaname: '澄海一区', areaId: 3031 }, { areaname: '澄海二区', areaId: 3032 }] }, { cityname: "潮州市", cityId: 304, areas: [{ areaname: '潮州一区', areaId: 3041 }, { areaname: '潮州二区', areaId: 3042 }] }] }, { provname: '甘肃省', provId: 4, citys: [{ cityname: "兰州市", cityId: 401, areas: [{ areaname: "兰州一区", areaId: 4011 }, { areaname: "兰州二区", areaId: 4012 } ] }, { cityname: "白银市", cityId: 402, areas: [{ areaname: '白银一区', areaId: 4021 }, { areaname: '白银二区', areaId: 4022 }] }, { cityname: "敦煌市", cityId: 403, areas: [{ areaname: '敦煌一区', areaId: 4031 }, { areaname: '敦煌二区', areaId: 4032 }] }, { cityname: "定西市", cityId: 404, areas: [{ areaname: '定西一区', areaId: 4041 }, { areaname: '定西二区', areaId: 4042 }] }] } ]
demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery.min.js"></script> <script src="js/data.js"></script> </head> <body> <!-- 先添加三个下拉列表 --> <select name="prov" id="prov"> </select> <select name="city" id="city"> </select> <select name="area" id="area"> </select> <script> var $prov=$("#prov") var $city=$("#city") var $area=$("#area") $(function(){ //页面加载完成后触发 $.each(data,function(i,e){ $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //在$obj的末尾追加子元素newObj }) $prov.prepend('<option value="" selected>请选择</option>'); //当省名被选择时,触发以下事件 $prov.on("change",function(){ //遍历省 $.each(data,function(i,e){ if($prov.val()==e.provId){ //遍历市 $city.html('<option value="">请选择</option>');//用来清空之前选择的市 $.each(e.citys,function(i,e2){ $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>'); }) } }) }) //当市名被选择时,触发以下事件 $city.on("change",function(){ //遍历省 $.each(data,function(i,e){ if($prov.val()==e.provId){ $.each(e.citys,function(i,e2){ if($city.val()==e2.cityId){ $area.html('<option value="">请选择</option>'); $.each(e2.areas,function(i,e3){ $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>'); }) } }) } }) }) }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jquery图片轮播代码
- jquery遍历json字符串
- jquery抛物线动画加入购物车
- jquery deferred对象
- jquery如何实现倒计时
- jQuery邮箱自动补全
- jquery on绑定hover
- jquery实现微信中长按识别二维码
- jquery中filter
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- jquery获取outerhtml
- jquery五子棋javascript(原生JavaScript实现简单五子棋游戏)
- jQuery end()
- jquery解析xml
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- jquery左右选择框
- 这竟然是捏出来的 20种橡皮泥玩法让你轻松hold住魔娃(这竟然是捏出来的)
- 自制橡皮泥(自制橡皮泥)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
热门推荐
- mysql5.7.24rpm安装(MySQL系列-YUM及RPM包安装v5.7.34)
- thinkphp5访问路径(thinkphp5修改view到根目录实例方法)
- SQL数据库存储过程示例解析(SQL数据库存储过程示例解析)
- python使用什么函数定义匿名函数(Python匿名函数及应用示例)
- 阿里云centos7java服务器搭建(阿里云 ubuntu16.04搭建IPSec服务)
- pandas怎么写入csv文件(Pandas读写CSV文件的方法示例)
- laravel 验证规则(Laravel中正确地返回HTTP状态码方法示例)
- HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
- sqlserver代理无法启动错误1607(SQL Server代理:理解SQL代理错误日志处理方法)
- docker配置自己的环境(docker可视化工具Portainer部署并汉化的操作)