js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 表单按钮

jquery下拉菜单城市选择代码_全国省市区三级联动下拉菜单

发布时间:2015-09-02 13:56:24    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery下拉菜单城市选择代码_全国省市区三级联动下拉菜单

多级城市选择器、适用于注册、用户基本信息页面的下拉3级省市区选择控件特效代码

function showLocation(province , city , town) {	
	var loc	= new Location();
	var title	= ['省份' , '地级市' , '市、县、区'];
	$.each(title , function(k , v) {
		title[k]	= '<option value="">'+v+'</option>';
	})
	
	$('#loc_province').append(title[0]);
	$('#loc_city').append(title[1]);
	$('#loc_town').append(title[2]);
	
	$("#loc_province,#loc_city,#loc_town").select2()
	$('#loc_province').change(function() {
		$('#loc_city').empty();
		$('#loc_city').append(title[1]);
		loc.fillOption('loc_city' , '0,'+$('#loc_province').val());
		$('#loc_city').change()
	})
	
	$('#loc_city').change(function() {
		$('#loc_town').empty();
		$('#loc_town').append(title[2]);
		loc.fillOption('loc_town' , '0,' + $('#loc_province').val() + ',' + $('#loc_city').val());
	})
	
	$('#loc_town').change(function() {
		$('input[name=location_id]').val($(this).val());
	})
	
	if (province) {
		loc.fillOption('loc_province' , '0' , province);
		
		if (city) {
			loc.fillOption('loc_city' , '0,'+province , city);
			
			if (town) {
				loc.fillOption('loc_town' , '0,'+province+','+city , town);
			}
		}
		
	} else {
		loc.fillOption('loc_province' , '0');
	}
		
}

$(function(){
	showLocation();
	$('#btnval').click(function(){
		alert($('#loc_province').val() + ' - ' + $('#loc_city').val() + ' - ' +  $('#loc_town').val()) 
	})
	$('#btntext').click(function(){
		alert($('#loc_province').select2('data').text + ' - ' + $('#loc_city').select2('data').text + ' - ' +  $('#loc_town').select2('data').text) 
	})
})



联动下拉 菜单 城市选择代码

jquery下拉菜单城市选择代码_全国省市区三级联动下拉菜单

js实现城市三级联动下拉表单选择特效

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery仿腾讯云全屏下拉导航菜单特效代码

jquery仿通用3C电商网站左侧弹出菜单导航特效

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery.ScrollNav精美滑动菜单导航条特效

jquery网页左侧点击展开收缩垂直菜单特效

jquery仿海信官网带缩略图下拉导航菜单特效

jquery仿天猫左侧导航菜单分类列表

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿京东城市地区选择器3级联动菜单特效

jquery实现点击弹出菜单九宫格布局特效

jquery实现动画悬浮图标菜单特效

js实现竖直收缩导航菜单,点击展开折叠菜单特效

jquery实现垂直可折叠菜单特效

jquery导航菜单可拖动特效

jquery实现新闻门户网站二级导航菜单特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

友荐云推荐
大家说 此评论不代表本站观点