这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个省市区三级选择联级,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="province"> <option>---请选择---</option> </select> <select id="city"> <option>---请选择---</option> </select> <select id="area"> <option>---请选择---</option> </select> <script src="addr.js"></script> <script src="../lib/jquery-3.3.1.js"></script> <script> var pro = []; $(function (){ $.each(temp,function (){ $("#province").append("<option>"+$(this)[0].label+"</option>"); }); $("#province").on("change",function (){ $("#city").html("<option>"+"---请选择---"+"</option>"); $("#area").html("<option>"+"---请选择---"+"</option>") var select_pro = $(this).val(); $.each(temp,function (index,element){ if (element.label == select_pro){ var city = element.children; for (let i = 0; i < city.length ; i++) { $("#city").append("<option>"+city[i].label+"</option>"); } $("#city").on('change',function () { $("#area").html("<option>"+"---请选择---"+"</option>"); var select_city = $(this).val(); for (var i=0;i < city.length ; i++) { console.log(city[i].label); if (city[i].label == select_city) { var area = city[i].children; for (var i=0;i < area.length ; i++) { $("#area").append("<option>"+area[i].label+"</option>"); } } } }); } }); }); }); </script> </body> </html>
上述就是小编为大家分享的使用JavaScript怎么实现一个省市区三级选择联级了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。