才学JS不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，dom获取较为复杂，纯粹使用自己了解到的东西依赖//css是用rem写的<script src="js/app.js" type="text/javascript" charset="utf-8"></script><script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>//mui提供的城市js<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>HTML<div id="addSelect" class="mui-popover mui-popover-bottom mui-popover-action"> <div id="slider" class="mui-slider"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div class="select-head"> <ul class="select-nav mui-clearfix" id="selectNav"> <li>请选择</li> <li class="mui-hidden">请选择</li> <li class="mui-hidden">请选择</li> </ul> <a id="addressBtn">确定</a> </div> </div> <div class="mui-slider-group select-con" id="selectCon"> <div id="item1" class="mui-slider-item mui-control-content mui-active"> <div id="scroll1" class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul id="select-con-1"> </ul> </div> </div> </div> <div id="item2" class="mui-slider-item mui-control-content"> <div id="scroll2" class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul id="select-con-2"> </ul> </div> </div> </div> <div id="item3" class="mui-slider-item mui-control-content"> <div id="scroll3" class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul id="select-con-3"> </ul> </div> </div> </div> </div> </div></div><div class="mui-content"> <div class="box" style="margin: 30px 20px;"> <a id="address">地址</a> </div></div>页面内JSmui.init();mui('.mui-scroll-wrapper').scroll({ scrollY: true, //是否竖向滚动 bounce: true //是否启用回弹});var p = ''; //文字var num = ''; //value值var address = document.getElementById('address')address.addEventListener('tap',function(){ mui('#addSelect').popover('show'); addS();})function giveValue(){ address.innerHTML = p; mui('#addSelect').popover('hide'); console.log(p); console.log(num);}调用函数function addS(){ var slider = mui('#slider').slider(); var selectNav = document.getElementById('selectNav'); var selectNavLi = selectNav.getElementsByTagName('li'); var oneUl = document.getElementById('select-con-1'); var twoUl = document.getElementById('select-con-2'); var threeUl = document.getElementById('select-con-3'); var item1 = document.getElementById('item1'); var item2 = document.getElementById('item2'); var item3 = document.getElementById('item3'); var index1 , index2 , index3; for( i=0 ; i<cityData3.length ; i++){ var li = document.createElement("li"); li.setAttribute('value',cityData3[i].value); li.innerHTML = cityData3[i].text; oneUl.appendChild(li) } var OneLi = oneUl.getElementsByTagName('li'); for( i=0 ; i<OneLi.length ; i++){ var a = OneLi[i]; a.index = i; a.addEventListener('tap',function(){ //清空第二个ul twoUl.innerHTML = ''; selectNavLi[1].innerText = '请选择'; selectNavLi[2].classList.add('mui-hidden'); //获取下标和切换显示 index1 = this.index; for(var i = 0; i < OneLi.length ; i++){ OneLi[i].classList.remove('active'); } this.classList.add('active'); selectNavLi[0].innerText = this.innerText; selectNavLi[0].classList.add('active'); selectNavLi[1].classList.remove('mui-hidden'); //创建li并向第二个ul赋值 var children = cityData3[index1].children; for( i=0 ; i<children.length ; i++){ var li = document.createElement("li"); li.setAttribute('value',children[i].value); li.innerHTML = children[i].text; twoUl.appendChild(li); } //显示第二个 item2.classList.remove('mui-hidden'); selectNavLi[1].classList.remove('active'); slider.gotoItem(1,300); slider.stopped = false; //开启滑动切换 var twoLi = twoUl.getElementsByTagName('li'); for( i=0 ; i<twoLi.length ; i++){ var a = twoLi[i]; a.index = i; a.addEventListener('tap',function(){ //清空第二个ul threeUl.innerHTML = ''; //获取下标和切换显示 index2 = this.index; for(var i = 0; i < twoLi.length ; i++){ twoLi[i].classList.remove('active'); } this.classList.add('active'); selectNavLi[1].innerText = this.innerText; selectNavLi[1].classList.add('active'); selectNavLi[2].classList.remove('mui-hidden'); //创建li并向第二个ul赋值 var children = cityData3[index1].children[index2].children; for( i=0 ; i<children.length ; i++){ var li = document.createElement("li"); li.setAttribute('value',children[i].value); li.innerHTML = children[i].text; threeUl.appendChild(li); } //显示第三个 item3.classList.remove('mui-hidden'); slider.gotoItem(2,300); var threeLi = threeUl.getElementsByTagName('li'); for( i=0 ; i<threeLi.length ; i++){ var a = threeLi[i]; a.index = i; a.addEventListener('tap',function(){ for(var i = 0; i < threeLi.length ; i++){ threeLi[i].classList.remove('active'); } this.classList.add('active'); }) } }) } }) } //导航点击事件 selectNavLi[0].addEventListener('tap',function(){ slider.gotoItem(0,300); }) selectNavLi[1].addEventListener('tap',function(){ slider.gotoItem(1,300); }) selectNavLi[2].addEventListener('tap',function(){ slider.gotoItem(2,300); }) //提交 document.getElementById('addressBtn').addEventListener('tap',function(){ p = ''; num = ''; var active = document.getElementsByClassName('select-con')[0].getElementsByClassName('active'); if(active.length == 0){ return; }else{ var threeLi = threeUl.getElementsByClassName('active').length; for(i=0 ; i<active.length ; i++){ var value = active[i].getAttribute('value'); var text = active[i].innerText; if(i==0){ num += value; }else{ num += ','+value; } if(threeLi>1){ p = active[0].innerText + active[1].innerText + '多个区域'; }else{ p += text; } } } // 赋值 giveValue(); })}cssul,li{ margin: 0; padding: 0; list-style: none;}.mui-popover{ height: 5rem; background-color: #fff !important;}.mui-slider-group{ height: 4.42rem !important;}.mui-slider-item{ border: none !important;}.select-head{ position: relative; display: flex; justify-content: space-between; padding: 0 0.26rem; width: 100%; height: 0.58rem;}.select-head:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e5e5e5; transform: scaleY(.5);}.select-head ul{ flex: 1;}.select-head ul li{ position: relative; float: left; margin-right: 0.24rem; font-size: 0.186rem; color: #333; line-height: 0.58rem; color: #CE3D3A;}.select-head ul li.active{ color: #333;}.select-head ul li.active:after{ height: 0;}.select-head ul li:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #CE3D3A;}.select-head a{ float: right; border: none; font-size: 0.186rem; line-height: 0.58rem;}.select-con{ position: relative;}.select-con .mui-scroll-wrapper{ margin: 0; height: 4.42rem;}.select-con .mui-scroll-wrapper ul{ padding: 0.1rem 0;}.select-con .mui-scroll-wrapper li{ padding: 0 0.26rem; line-height: 0.58rem; font-size: 0.186rem; color: #333;}.select-con .mui-scroll-wrapper li.active{ color: #CE3D3A;}
