jquery省市区三级联动_省市区三级联动jq资源-CSDN文库

共2个文件

js：1个

html：1个

jquery

javascript

三级联动

城市选择

需积分: 49 191 浏览量 2022-04-01 10:44:58 上传评论收藏 52KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

SelectAddress.rar （2个子文件）

SelectAddress

selectBox.html 5KB

SelectAddress.js 204KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="./js/SelectAddress.js" type="text/javascript" charset="utf-8"></script> <title>SelectAddress</title> <style type="text/css"> .box > div{ margin: 50px 0; } .addressBox{ position: relative; width: 150px; height: 40px; margin: 0 6px; box-sizing: border-box; text-align: left; cursor: pointer; border: 1px solid #dcdfe6; border-radius: 4px; } /* 三角符号 */ .select_caret_start::after{ content: ''; display: block; border: solid #c0c4cc; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; right: 12px; top: 15px; transition: transform .3s; } .select_caret_end::after{ content: ''; display: block; border: solid #c0c4cc; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); position: absolute; right: 12px; top: 18px; transition: transform .3s; } .addressBox:hover{ border: 1px solid #c0c4cc; } .Box_active{ border: 1px solid #409eff !important; } .addressBox .placeholder{ color: #888; height: 100%; line-height: 40px; box-sizing: border-box; padding:0 20px; width: 100%; height: 100%; display: block; } .addressBox .Val{ display: block; width: 100%; height: 100%; padding: 0; margin: 0; color: #333; height: 100%; line-height: 40px; font-weight: 400; box-sizing: border-box; padding:0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addressBox ul{ width: 100%; padding: 0; margin: 0; list-style: none; max-height: 274px; overflow-y: scroll; position: absolute; top: 40px; left: 0; border: 1px solid #e4e7ed; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); box-sizing: border-box; margin: 5px 0; padding: 4px 0; transition: all 0.2s; } .addressBox ul li{ font-size: 14px; padding: 0 20px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #606266; height: 34px; line-height: 34px; box-sizing: border-box; cursor: pointer; } .addressBox ul li:hover{ background-color: #f5f7fa; } /* 子元素选中样式未做 */ .addressBox ul .active{ background-color: #f5f7fa; color: #409eff; font-weight: 700; } /* 设置滚动条的样式 */ .addressBox ::-webkit-scrollbar { width:6px; } /* 滚动槽 */ .addressBox ::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(0,0,0,0.3); border-radius:4px; } /* 滚动条滑块 */ .addressBox ::-webkit-scrollbar-thumb { border-radius:4px; background:rgba(0,0,0,0.1); -webkit-box-shadow:inset006pxrgba(0,0,0,0.5); } .addressBox ::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } .addressBox ::selection { background:none; } .addressBox ::-moz-selection { background:none; } .addressBox ::-webkit-selection { background:none; } </style> </head> <body> <div class="box">  <div id="selectBox"></div>   <script type="text/javascript"> // 实例化默认调用方式【传入容器id，注：这里仅支持id类名】 var SelAddress = new SelectAddress("selectBox"); // 默认每次选择后根元素上面会立即绑定已选值数据 labellist和labelval 可自行f12查看DOM上以便于自行获取选择后的结果 // console.log(SelAddress.getValue()); //获取选择后值【选择完毕后调用此方法生效】 // 实例化调用方式2 可传默认选中城市或者修改默认提示文字【二者其一即可】 // var SelAddress2 = new SelectAddress("selectBox2", { // defaultAds:['重庆','沙坪坝区','大学城'], //默认设置值 // // placeholders:['请选择一级','请选择二级','请选择三级'],//可设置默认提示词与默认设置值只能设置其一 // }); </script> </div> </body> </html>