html 移动端地区联动,jQuery移动端城市区县二级联动选择代码

js代码

var options = {

scrollY: true, // 因为scrollY默认为true，其实可以省略

scrollX: true,

mouseWheel: true,

click: true

}

var wrapper = document.querySelector('.wrapper');

var scroll = new BScroll(wrapper, options);

// 城市选择

$('input[name="city"]').on('click',function(){

$('.city-box').slideDown(500,function(){

scroll.refresh();

});

$('.masker').removeClass('hidden');

})

$('.masker').on('click', function(){

$('.masker').addClass('hidden');

$('.city-box').slideUp(500);

$('.area-box').slideUp(500);

})

$('.city-box .content').on('click', 'li', function(e){

$('input[name="city"]').val(e.target.innerHTML);

$('input[name="district"]').val('');

$('.city-box').slideUp(500);

$('.masker').addClass('hidden');

})

$('.hot-city').on('click', 'a', function(e){

$(this).addClass('active');

var hotValue = $(this).attr('data-value');

$('input[name="city"]').val(hotValue);

$('input[name="district"]').val('');

$('.city-box').slideUp(500, function(){

$('.hot-city a').removeClass('active');

});

$('.masker').addClass('hidden');

})

$('.city-sidaber').on('click',function(e){

var value = e.target.innerHTML;

var alphabet = $('.letter-title');

alphabet.map(function(i,item){

if(item.innerHTML == value){

scroll.scrollToElement(item);

}

})

})

$('input[name="district"]').on('click',function(){

var preValue = $('input[name="city"]').val();

if(preValue){

traverseArea(preValue);

$('.area-box').slideDown(500);

$('.masker').removeClass('hidden');

}

})

$('.citylist').on('click', 'li', function(e){

$('input[name="district"]').val(e.target.innerHTML);

$('.n-msg-city').removeClass('tip-active').text("(必填项)");

$('.area-box').slideUp(500);

$('.masker').addClass('hidden');

})