头像

jQuery input文本框三级联动地区选择下拉菜单代码

来源:http://www.sucaihuo.com/js/2200.html 素材火管理员 2017-06-19 18:23浏览(323) 收藏

jQuery input文本框三级联动地区选择下拉菜单代码,注意这不是select下拉选择菜单,而是input文本框实现的,除了做地区三级联动效果,还可以运用于商品分类选择等等。
jQuery input文本框三级联动地区选择下拉菜单代码
分类:表单代码 > 三级联动 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 6 下载资源 下载积分: 20 积分

js代码

<script src="js/jquery-1.8.2.min.js"></script>
<script>
$(function(){
	function select_simulated(select_style,bomb_con_style){
		$(document).click(function(){
			$(bomb_con_style).hide();
			})
		$(select_style).live('click',function(e){
			var thisinput=$(this);
			var local=$(this).position();
			var bomb_con=$(bomb_con_style);
				$(this).parents("li").siblings().find(bomb_con_style).hide();
				$(this).parent().find(bomb_con_style).width($(this).width());//下拉框的宽度
				$(this).parent().find(bomb_con_style).show();
				e?e.stopPropagation():event.cancelBubble = true;
				bomb_con.find("dd").click(function(e){
				var bomb_text=$(this).text();
				$(this).addClass("selected").siblings().removeClass("selected");
				$(this).parents(bomb_con_style).hide();
				$(this).parents("li").find(select_style).val(bomb_text);
				e?e.stopPropagation():event.cancelBubble = true;
				
		});	
		});
		 return false;
	}
	select_simulated(".provin_select",".provin_con");
	
	  
	$(".local").focus(function(){
		$(this).addClass("local3");
	});
	$(".local").blur(function(){
		$(this).removeClass("local3");
	});
	})
</script>
评论2
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 椅子
    10-08 18:24
    272822
    效果不错先收藏
  • 头像 沙发
    06-20 09:51
    a51821064
    不错的效果赞!
1 2