html 移动端地区联动,index.html

省市区三级联动

* { margin: 0; padding: 0; }

html,body { height: 100%; }

.city { border: 1px solid #999; width: 150px; height: 26px; font-size: 12px; line-height: 26px; }

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if(clientWidth > 750){

docEl.style.fontSize = 20 * (750 / 375) + 'px';

}

else{

docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

$(function(){

$("#city").Picker({

city: true,

area: true,

pca: ['广东','深圳','南山'],

pick: function(res){

console.log(res)

}

})

$("#city2").Picker({

city: true,

area: true,

pca: ['广东','广州','越秀'],

pick: function(res){

console.log(res)

}

})

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史