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中$.each的用法
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- jquery左右选择框
- 如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
- jquery 选择器的用法
- jQuery里$(this)和this的区别有哪些
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- Jquery对数组的操作
- jQuery end()
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- jquery中append和appendto的区别
- jquery的each的用法
- jquery中prop和attr的区别
- jquery unbind
- jQuery on()方法
- jquery操作table
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
热门推荐
- 如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
- dedecms安全设置(织梦系统DedeCMS设定栏目及文档权限登录后跳转到登陆前的页面的实现方法)
- dedecms时间代码(Dedecms中常用数据调用的sql语句汇总)
- django实现登录注册(django与小程序实现登录验证功能的示例代码)
- sqlserver2014怎么重新激活(解决Windows 10家庭版安装SQL Server 2014出现.net 3.5失败问题)
- css 翻动效果(CSS实现全屏切换效果的示例代码)
- php集成支付(ThinkPHP框架整合微信支付之刷卡模式图文详解)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- dataframe数据处理教程(对dataframe数据之间求补集的实例详解)
- Html5新增的标签