H5页面mui 省市区三级联动

xiaoxiao2023-10-01 163

H5页面使用mui插件，实现省市区三级联动效果,主要是引用city.data.js和city.data-3.js这两个核心文件准备工作： js,css获取可以使用HBuilderX工具 HBuilderX工具链接: https://pan.baidu.com/s/1F6XYM1Z4u2NMaa7QHqCPKQ 提取码: wime 复制这段内容后打开百度网盘手机App，操作更方便哦创建文件，选择hello mui,创建的文件里面有这些源css和js 或者在GitHub上去下载 https://github.com/dcloudio/mui/tree/master/plugin/picker/css

css文件

js文件

js代码

// 显示三级联动 (function($, doc) { $.init(); $.ready(function() { if(!doc.getElementById('addressPicker')){ return; } var userPicker = new mui.PopPicker({ //三级联动 layer: 3 }); userPicker.setData(cityData3); var showUserPickerButton = doc.getElementById('addressPicker'); showUserPickerButton.addEventListener('tap', function(event) { userPicker.show(function(items) { if(items[0]){ $("#provinceSpan")[0].innerText = items[0].text; } if(items[1]){ $("#citySpan")[0].innerText = items[1].text; } if(items[2]){ $("#address1Span")[0].innerText = items[2].text; } }); }, false); }); })(mui, document);

html

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>添加新地址</title> <meta name="keywords" content=""> <meta name="description" content=""> <script src="js/rem.js"></script> <script src="js/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/page.css"/> <link rel="stylesheet" type="text/css" href="css/all.css"/> <link rel="stylesheet" type="text/css" href="css/mui.min.css"/> <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/> <link rel="stylesheet" type="text/css" href="css/loading.css"/> <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/> <link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" /> <script type="text/javascript"> $(window).load(function(){ $(".loading").addClass("loader-chanage") $(".loading").fadeOut(300) }) </script> <style> .spancolor{ color: #999; } </style> </head>  <div class="loading"> <div class="loader"> <div class="loader-inner pacman"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>  <body> <header class="mui-bar mui-bar-nav report-header box-s" id="header"> <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a> <p>添加新地址</p> <span class="fr baocun" onclick="funtSubmitAddress()">保存</span> </header> <div id="main" class="mui-clearfix add-address"> <div class="plist clearfloat data"> <ul> <li class="clearfloat"> <p class="fl">收货人</p> <input type="text" class="fl shuru" id="receiptName" placeholder="长度为2至10个汉字" minlength="2" maxlength="10" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" /> </li> <li class="clearfloat"> <a href="#"> <p class="fl">联系电话</p> <input type="text" id="receiptPhone" minlength="11" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"/> </a> </li> <li class="clearfloat" id="addressPicker"> <a href="#" > <p class="fl">所在地区</p> <span class="spancolor" id="provinceSpan"></span> <span class="spancolor" id="citySpan"></span> <span class="spancolor" id="address1Span"></span> <i class="fr iconfont icon-jiantou1"></i> </a> </li> <li class="clearfloat"> <a href="#"> <p class="fl">邮政编码</p> <input type="text" id="receiptZipcode" minlength="6" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')"/> </a> </li> </ul> </div> <textarea id="receiptAddress" rows="4" cols="" placeholder="请填写详细地址，不少于5个字" class="textare box-s"></textarea> <div class="address-btn clearfloat"> <span class="szwmr fl">设为默认</span> <a href="#" class="toggle toggle--on fr"></a> </div> </div> </body> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" src="js/mui.picker.min.js"></script> <script type="text/javascript" src="js/others.js"></script> <script type="text/javascript" src="js/hmt.js" ></script> <script type="text/javascript" src="slick/slick.js" ></script> <script type="text/javascript" src="../../js/common.js"></script>  <link rel="stylesheet" href="css/swiper.min.css"> <script type="text/javascript" src="js/swiper.jquery.min.js"></script>  <script type="text/javascript" src="js/city.data.js"></script> <script type="text/javascript" src="js/city.data-3.js"></script> <script type="text/javascript" src="js/mui.poppicker.js"></script> </html>

最新回复(0)