2. 程式人生 > >iosselect簡單使用(三級聯動)

iosselect簡單使用(三級聯動)

阿新 • • 發佈：2019-01-08
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(); } }

相關推薦

Ajax實現簡單三級聯動

使用簡單的Servlet響應前端請求，結合ajax實現省-市-縣的三級聯動（後臺Service層和dao層程式碼省略） 前端頁面展示： <body> <select id="provinceId" onchange="provinceChange

iosselect簡單使用(三級聯動)

export default { name: 'UserDatum', data () { return { iosProvinces:[], iosCitys:[], iosCountys:[] } }, methods: { t

jQuery簡單的省市區縣三級聯動案例

結構 ted change mage jquer ges ict 第一個 lin 簡單的省市區三級聯動，適合初學者入門學習的案例 目錄結構如下： 三級聯動.html 跟 JS文件夾是同個級別 效果圖如下： HTML代碼： 1 <style type="te

AJAX-簡單的省市縣三級聯動

rip cnblogs wid clas 指定 聯動 ajax func 分享 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta c

ajax結合php簡單的城市三級聯動

his function var option com quest .html model html //ajax代碼 $(‘#pro‘).change(function () { var id = $(this).val(); if (id

一個簡單的三級聯動

end http nbsp edi val mage append document doc 一個簡單的三級聯動。 <div class="editInput"> <select id="province"><option&g

簡單實現仿某寶地址選擇三級聯動樣式

聯動 ets 好的 AI list 曾經 lac XML recycle 內容簡單介紹 實現步驟 第一步 找準方向 第二步 開幹 總結 還是題外話

最簡單的三級聯動

最近研究了一下聯動原理，大多數聯動都是通過ajax實現的，其實就是通過ajax把頁面資料傳給後臺，在不重新整理頁面的情況下，改變下拉框的值。話不多說上程式碼講解： <!DOCTYPE html> <html> <head> <meta cha

簡單的js日期三級聯動下拉程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Android 最簡單的三級聯動（地區）第三方庫實現

一  ：  效果圖展示   二  因為用到是第三方庫，要匯入下面的依賴 1   compile 'liji.library.dev:citypickerview:1.1.0' 2  xml佈局： <RelativeLayout android:id="

使用json資料實現簡單的三級聯動

json資料格式: var data = { "province": ["廣東省","廣東省","廣東省","廣東省","廣東省","廣東省","廣東省"], "city":{ "廣東省":["韶關市","韶關市","韶關市","韶關市","韶關市"], "山東

一篇賊簡單的三級聯動

直接上效果 所需依賴 implementation 'liji.library.dev:citypickerview:0.1.0' 程式碼塊 CityPickerView cityPickerView = new CityPickerView(MainActivity.thi

wheel自定義控制元件，實現城市三級聯動，時間選擇的功能簡單使用

                對於Android初學者，最煩的就是學習自定義控制元件。原生的控制元件不是醜就是無法滿足需求，不得以我們只好自己重寫控制元件的方法，下面我就為大家介紹一下某大神自定義的wheel控制元件Android滾輪控制元件，基於ListView實現，可以自定義樣式。，此控制元件可以實現

WinForm Timer控件,三級聯動[省,市,區]

end cte mbo winform void edi 數據 display init Timer控件： 組件中的最後一個控件，功能是可以根據用戶自定義的時間間隔來觸發時間，不會印象窗體本身的其他事件進行。 屬性： 　　Enable 設置控件是否啟用 　　Interva

winform/timer控件/權限設置/三級聯動

sender art source cte 默認 時間 box chan 控件 一、timer控件 組件--timer timer是一個線程，默認可以跨線程訪問對象 屬性：Enabled--可用性 Interval--間隔時間 Tick：間隔時間發生事件 二、三級聯動 例：

AJAX+PHP實現三級聯動

lec hang implode clas success cti 部分 點擊事件 ces 利用ajax實現頁面地區選擇三級聯動 效果圖如下 當選擇相應省份時，對應顯示出所有相關城市和地區的下拉選擇 來看下如何實現的 html頁面部分 <!DOCTYPE htm

用jQuery,ajax,實現三級聯動封裝JS的文件

ava [0 success ucc log jquer div 三級 cti // JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV，造三個下拉扔進去 var str =

js實現省市區三級聯動

pre 聯動 準備 path div data- pic asc com 電商平臺或者一些網站的個人信息部分，通常會有填寫地址的功能。該功能一般分為二級聯動（省、市）和三級聯動（省、市、區），只需要JavaScript就可以實現。 這裏介紹一種很簡潔易用的方法。參考地址：h

多級聯動系列——ajax調用XML實現三級聯動

title div sdn 選擇器 class var () doc img ajax 使用起來特別的方便，再也不操心瀏覽器兼容問題了。用ajax調用XML頁面中的內容，來生成三級聯動，OK廢話不多說，跟著我一步步寫吧。 首先寫一個XML文件。data.xml <

js時間日期的三級聯動

this innerhtml end 後臺 run reat func 時間 dropdown aspx: <div style="width:70px;float:left;">生日</div> <asp:DropD