npm安裝

npm install iosselect --save

index.html引入文件

<link rel="stylesheet" href="static/iosSelect.css"> <script type="text/javascript" src="static/iosSelect.js"></script> <template><div class="menu-container" ref="menuContainer"><div class="referen-btn">保存</div><!-- 這個是內容 --><div class="contents"><div class="userdatum-info"><label for="">店鋪名稱</label><input type="text" placeholder="請填寫店鋪名稱"></div><div class="userdatum-info userdatum-info-next" @click.stop="changeMastDisplay('mastuserdatum')"><label for="">所屬行業</label><input type="text" placeholder="請填寫所屬行業"></div><div class="userdatum-info" @click="initIosSelect"><label for="">所屬區域</label><!-- <input type="text" placeholder="請填寫所屬區域"> --><!-- 三級聯動 --><input type="hidden" ref="contact_province_code" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name=""> <input type="hidden" ref="contact_city_code" name="contact_city_code" id="contact_city_code" value="" data-city-name=""><span ref="show_contact" data-city-code="52" data-province-code="2" data-district-code="50" id="show_contact">北京 北京 東城區</span> </div><div class="userdatum-info"><label for="">詳細地址</label><input type="text" placeholder="請填寫詳細地址"></div><div class="userdatum-info"><label for="">聯系人</label><input type="text" placeholder="請填寫聯系人"></div><div class="userdatum-info"><label for="">手機</label><input type="text" placeholder="請填寫手機"></div><div class="userdatum-info"><label for="">郵箱</label><input type="text" placeholder="請填寫郵箱"></div></div></div> </template><script> export default {name: 'UserDatum',data () {return {iosProvinces:[],iosCitys:[],iosCountys:[]}},methods: {topath: function (name) {this.$router.push({path:name});},changeMastDisplay: function (name) {this.$store.commit('mastdisplay',name);},initIosSelect: function () {let showContactDom = this.$refs.show_contact;let contactProvinceCodeDom = this.$refs.contact_province_code;let contactCityCodeDom = this.$refs.contact_city_code;let sccode = showContactDom.getAttribute('data-city-code');let scname = showContactDom.getAttribute('data-city-name');let oneLevelId = showContactDom.getAttribute('data-province-code');let twoLevelId = showContactDom.getAttribute('data-city-code');let threeLevelId = showContactDom.getAttribute('data-district-code');let iosSelect = new IosSelect(3, [this.iosProvinces, this.iosCitys, this.iosCountys],{itemHeight: 35,itemShowCount: 5,relation: [1, 1],oneLevelId: oneLevelId,twoLevelId: twoLevelId,threeLevelId: threeLevelId,callback: function (selectOneObj, selectTwoObj, selectThreeObj) {contactProvinceCodeDom.value = selectOneObj.id;contactProvinceCodeDom.setAttribute('data-province-name', selectOneObj.value);contactCityCodeDom.value = selectTwoObj.id;contactCityCodeDom.setAttribute('data-city-name', selectTwoObj.value);showContactDom.setAttribute('data-province-code', selectOneObj.id);showContactDom.setAttribute('data-city-code', selectTwoObj.id);showContactDom.setAttribute('data-district-code', selectThreeObj.id);showContactDom.innerHTML = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;}});},getareadata: function () {this.API.getareadata().then((response) => {response.filter((item,index) => {//拼接三級聯動數據let area = {parentId:item.region_type,id:item.region_id,value:item.region_name,...item};//過濾省市區的數據if(item.parent_id == 1){this.iosProvinces.push(area);}else if(item.parent_id == 2){this.iosCitys.push(area);}else if(item.parent_id == 3){this.iosCountys.push(area);}});}, (response) => {mui.toast('網絡錯誤');});}},components: {},computed: {},created: function () {this.getareadata();}} </script> <style scoped>*{margin: 0;padding: 0;font-size: 14px;font-family: "微軟雅黑";color: #333;}.menu-container{/*overflow: hidden;*/background: #eee;}.contents{margin-top: 44px;position: relative;padding: 0;/*overflow: scroll;*/}.userdatum-info{height: 44px;line-height: 44px;padding: 0px 10px;background: #fff;border-bottom: 1px solid #e7e7e7;position: relative;}.userdatum-info label, .userdatum-info input{float: left;margin: 0;padding: 0;}.userdatum-info:after{content: "";display: block;width: 0;height: 0;visibility: hidden;clear: both;}.userdatum-info label{width: 20%;}.userdatum-info input{width: 80%;border: none;height: 43px;line-height: 44px;text-align: right;}.userdatum-info-next input{padding-right: 15px;background: url("../../../../assets/right-arrow.png") no-repeat right center;}.userdatum-info #show_contact{position: absolute;right: 10px;top: 0px;height: 44px;line-height: 44px;width: 80%;text-align: right;color: #666;}.referen-btn{position: absolute;top: 0;right: 0;width: 44px;height: 44px;text-align: center;color: #fff;font-size: 14px;z-index: 10001;line-height: 44px;} </style>

總結

以上是生活随笔為你收集整理的iosselect简单使用(三级联动)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。