移動端省市區三級聯動選擇器
移動端專案中遇到三級聯動的問題，網上查了很多資料，都是依賴各種外掛，或者晦澀難於理解。於是，自己決定寫一個出來。 當然，沒有用到別的外掛類庫，也沒有用ajax。寫完這個小demo也學到不少，現在分享給大家程式碼。因為程式碼較多，我就不一個個解釋了，原始碼裡面添加了很多註釋。 為了便於大家使用，我將html精簡了許多。
<!DOCTYPE html> |
|
| 1 |
<html lang="en"> |
| 2 |
<head> |
| 3 |
<meta charset="UTF-8"> |
| 4 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| 5 |
<meta name="apple-mobile-web-app-capable" content="yes"> |
| 6 |
<title>三級聯動</title> |
| 7 |
<link rel="stylesheet" href="index.css"> |
| 8 |
</head> |
| 9 |
<body> |
| 10 |
<div class="select"> |
| 11 |
請選擇區域 |
| 12 |
</div> |
| 13 |
<script src="city.js"></script> |
| 14 |
<script src="index.js"></script> |
| 15 |
</body> |
| 16 |
</html> |
至於三級聯動的資料，我重新定義了一個js檔案，在檔案中建立了一個json物件，複製了伺服器的三級聯動的資料過來。 下面是
| 0 |
(function(){ |
| 1 | |
| 2 |
var sel = document.querySelector('.select'), |
| 3 |
createDivFlag = true; |
| 4 |
windowHeight = window.screen.availHeight, |
| 5 |
startYFlag = 0; |
| 6 | |
| 7 |
var div,cur,province,city,county,ok,resut,oneNum,twoNum,threeNum,touchFlag, |
| 8 |
touchOn = true, |
| 9 |
touchStop = true, |
| 10 |
tochBegin = true; |
| 11 | |
| 12 |
//判斷是否能開啟 |
| 13 |
sel.addEventListener('touchend',function(){ |
| 14 | |
| 15 |
createDivFlag && createDiv(); |
| 16 | |
| 17 |
}) |
| 18 | |
| 19 |
//開始生成盒子 |
| 20 |
function createDiv(){ |
| 21 | |
| 22 |
//判斷避免重複生成 |
| 23 |
if(!div){ |
| 24 |
div = document.createElement('div'), |
| 25 |
cur = document.createElement('div'), |
| 26 |
ok = document.createElement('div'), |
| 27 |
resut = document.createElement('div'), |
| 28 |
province = document.createElement('div'), |
| 29 |
city = document.createElement('div'), |
| 30 |
county = document.createElement('div'); |
| 31 | |
| 32 |
div.className = 'win'; |
| 33 |
cur.className = 'current'; |
| 34 |
ok.className = 'ok'; |
| 35 |
resut.className = 'resut'; |
| 36 |
province.className = 'province'; |
| 37 |
city.className = 'city'; |
| 38 |
county.className = 'county'; |
| 39 | |
| 40 |
ok.innerHTML = '完成'; |
| 41 |
resut.innerHTML = '取消'; |
| 42 | |
| 43 |
//賦值translate |
| 44 |
province.style.transform = 'translateY(80px)'; |
| 45 |
city.style.transform = 'translateY(80px)'; |
| 46 |
county.style.transform = 'translateY(80px)'; |
| 47 |
//給三個盒子繫結滑動事件 |
| 48 |
touchGo([province,city,county]); |
| 49 |
div.appendChild(cur); |
| 50 |
div.appendChild(ok); |
| 51 |
div.appendChild(resut); |
| 52 |
div.appendChild(province); |
| 53 |
div.appendChild(city); |
| 54 |
div.appendChild(county); |
| 55 |
document.body.appendChild(div); |
| 56 |
} |
| 57 | |
| 58 | |
| 59 |
//填充資料 |
| 60 |
fillIn(province,city,county); |
| 61 | |
| 62 | |
| 63 |
setTimeout(function(){ |
| 64 |
div.style.transform = 'translateY(-200px)'; |
| 65 |
},0); |
| 66 | |
| 67 |
//確認選擇 |
| 68 |
ok.addEventListener('touchend',function(){ |
| 69 | |
| 70 |
var one = province.querySelectorAll('span')[oneNum], |
| 71 |
two = city.querySelectorAll('span')[twoNum] || null, |
| 72 |
three = county.querySelectorAll('span')[threeNum] || null, |
| 73 |
selId, |
| 74 |
oneHtml, |
| 75 |
twoHtml, |
| 76 |
threeHtml; |
| 77 | |
| 78 |
oneHtml = one.innerHTML || ''; |
| 79 |
twoHtml = two ? two.innerHTML : ''; |
| 80 |
threeHtml = three ? three.innerHTML : ''; |
| 81 | |
| 82 |
sel.innerHTML = oneHtml + twoHtml + threeHtml; |
| 83 | |
| 84 | |
| 85 |
oneNodeValue = one ? one.attributes['data-id'].nodeValue : ''; |
| 86 |
twoNodeValue = two ? two.attributes['data-id'].nodeValue : ''; |
| 87 |
threeNodeValue = three ? three.attributes['data-id'].nodeValue : ''; |
| 88 |
selId = oneNodeValue + twoNodeValue + threeNodeValue + ''; |
| 89 | |
| 90 |
sel.setAttribute('data-id',selId); |
| 91 | |
| 92 |
div.style.transform = 'translateY(0)'; |
| 93 | |
| 94 |
createDivFlag = true; |
| 95 | |
| 96 |
}) |
| 97 | |
| 98 |
//取消選擇 |
| 99 |
resut.addEventListener('touchend',function(){ |
| 100 | |
| 101 |
div.style.transform = 'translateY(0)'; |
| 102 | |
相關推薦js實現移動端省市區三級聯動選擇器（附原始碼）效果圖: 核心程式碼： <script> var nameEl = document.getElementById('sel_city'); var first = []; /* 省，直轄市 */ var second = [] 移動端省市區三級聯動選擇器移動端專案中遇到三級聯動的問題，網上查了很多資料，都是依賴各種外掛，或者晦澀難於理解。於是，自己決定寫一個出來。 當然，沒有用到別的外掛類庫，也沒有用ajax。寫完這個小demo也學到不少，現在分享給大家程式碼。因為程式碼較多，我就不一個個解釋了，原始碼裡面添加 一秒整合 省市區三級聯動選擇器-CityPickerView第一步：Gradle引用 compile'liji.library.dev:citypickerview:0.1.0' 第二步：程式碼示例 CityPickerView cityPickerView = new CityPickerView(MainActivity.th vue移動端城市三級聯動元件先看效果圖 以下元件程式碼 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div 手機端省市區三級聯動由於業務需求，需要在手機端實現使用輸入框，進行省市區的三級聯動選擇，查閱網上相關資料之後，並且結合省市區的一些資料，自己寫了在手機平臺上實現省市區三級聯動的demo，具體樣式如下： 點選輸入框之後 Android仿蘋果實現省市區三級聯動選擇效果圖： 一、新增依賴dependencies { ····· implementation 'liji.library.dev:citypickerview:0.7.0' } 二、這裡就不在介紹佈局檔案了，直接演示實現程式碼： package c Android-PickerView 三級聯動選擇器的標題和內容的字型大小、顏色設定Android-PickerView這個開源專案已經轉交給我負責繼續維護，目前我已經更新優化一部分，填補了一些不足之處，推出了3.x新版本，使用起來更加靈活方便，定製性更強。歡迎提Issue ,Pull Request 更新時間：2017-2-24日 【JS外掛】下拉框通用三級聯動選擇 省市區三級聯動選擇省市區三級聯動選擇, 在我們開發中很常見, 下一級的下拉框資料與上一級的下拉框的值緊密相關, 所以需要我們處理的時候格外小心, 及時清理資料, 非同步載入資料時再去繫結值不容半點馬虎. 我今天給大家分享一個比較通用的Js外掛, 雖然叫JQuer layui自定義外掛citySelect 省市區三級聯動選擇citySelect.js /** * @ name : citySelect 省市區三級選擇模組 * @ Author: aggerChen * @ version: 1.0 */ layui.define(['layer','form','element','laytp vue仿京東省市區三級聯動選擇元件export default { name: 'myAddress', data () { return { showChose: false, showProvince: true, showCity: false, showDistr Android 地址選擇器，實現省市區三級聯動最近專案裡面用到了一個地址選擇器，實現現在主流的WheelView滑動選擇，整理了下，做了個Demo.廢話不多說，直接上程式碼： 主佈局： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xml 使用pickerview實現（省市區）地址選擇器的三級聯動此三級聯動的實現基於pickerview，附上github地址：Android-PickerView 這是一款仿iOS的PickerView控制元件，有時間選擇和選項選擇，並支援一二三級聯動，支援自定義樣式。 首先下載pickerview，將其作為Module新增進你的 第三方開源庫：日期時間選擇器（TimePickerDialog）+ 省市區三級聯動(CityPicker) + 一級滾動TimePickerDialog Android時間選擇器，支援年月日時分，年月日，年月，月日時分，時分格式，可以設定最小時間和最大時間（精確到分）。 效果圖 gradle compile 'com.jzxiang.pickervie Android省市區三級聯動滾輪選擇最近專案要做一個，類似淘寶手機客戶端的，選擇收貨地址的三級聯動滾動選擇元件，下面是它的大致介面截圖： 在iOS中有個叫UIPickerView的選擇器，並且在dataSource中定義了UIPickerView的資料來源和定製內容，所以用只要熟悉它的基本用法，要實 Android省市區三級聯動滾輪選擇（真實專案中提取出來的元件）最近專案要做一個，類似淘寶手機客戶端的，選擇收貨地址的三級聯動滾動選擇元件，下面是它的大致介面截圖： 在IOS中有個叫UIPickerView的選擇器，並且在dataSource中定義了UIPickerView的資料來源和定製內容，所以用只要熟悉它的基本用法，要實現這麼 【JavaScript】2018最新的省市區，獲取json，實現三級聯動選擇省市區（底部原始碼地址）注意：因為getJson()方法是不能獲取本地檔案的，所以頁面必須要在本地伺服器開啟，否則會產生跨域問題。 伺服器開啟頁面 本地file模式開啟頁面 程式碼應用部分 _loadRegion(localStorage.langu js實現省市區三級聯動pre 聯動 準備 path div data- pic asc com 電商平臺或者一些網站的個人信息部分，通常會有填寫地址的功能。該功能一般分為二級聯動（省、市）和三級聯動（省、市、區），只需要JavaScript就可以實現。 這裏介紹一種很簡潔易用的方法。參考地址：h WheelView實現省市區三級聯動(數據庫實現版本號附帶完整SQL及數據)tdi delet avi ipp cte public lis 網上 count() 近期在實現收貨地址功能。用到了省市區三級聯動效果。網上找到一般都是xml或json，數據源陳舊改動麻煩，改動了一下使用數據庫方式實現了一下 數據源解決，因為數據量 微信小程序------聯動選擇器程序 rdate let 簡單 格式 data image 選擇 logs picker 從底部彈起的滾動選擇器，現支持五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，默認是普通選擇器。 先來看看效果圖： 1 使用PHP+MySql+Ajax+jQuery實現省市區三級聯動功能b- 發生 sel substr 要求 java true 選中 .ajax 使用PHP+MySql+Ajax+jQuery實現省市區三級聯動功能 要求：寫一個省市區（或者年月日）的三級聯動，實現地區或時間的下拉選擇。 實現技術：php ajax 實現：省級下拉變化時市下拉 |