您的位置：首页 > 其它

mmenu插件扩展的一个选择省市县

2015-12-14 11:25 351 查看

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no" />
	<title>demo</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
	<link rel="stylesheet" href="http://cdn.bootcss.com/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css">
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js"></script>
	<script type="text/javascript" src='select.js'></script> <!-- <script type="text/javascript" src='select.js'></script>这个文件到mmenu官网下载 -->
	<script src="http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
	$(function(){
	/添加省份及直辖市/
	var provinceHtml="";
	var addressHtml = "";
	for(var i in province_enum){
	addressHtml+="<li data-role='province' data-id="+province_enum[i].id+"><span>"+province_enum[i].name+"</span><ul>";
	for(var j in province_enum[i].city){
	addressHtml+="<li data-role='city' data-id="+province_enum[i].city[j].id+"><span>"+province_enum[i].city[j].name+"</span><ul>";
	for(var k in province_enum[i].city[j].district){
	addressHtml+="<li data-parentPid="+province_enum[i].id+" data-parentCid="+province_enum[i].city[j].id+"><a href='#/' data-role='last'>"+province_enum[i].city[j].district[k].name+"</a></li>";
	}
	addressHtml+="</ul></li>";
	}
	addressHtml+="</ul></li>";
	}
	$('#provinceName').append(addressHtml);
	$("#menu")
	.mmenu({
	navbar:{add:true,title:"请选择地址",titleLink:"none"},
	searchfield: true,
	counters: true,
	offCanvas: {
	position: "bottom",
	zposition: "front",
	modal: true
	},
	extensions: ["theme-dark"]
	});
	var menu = $('#menu').data( "mmenu" );
	$('a[data-role]').bind('click',function(){
	var currentName = $(this).html();
	var tagHtml = $(this).parent('li');
	var pid = tagHtml.attr('data-parentPid');
	var cid = tagHtml.attr('data-parentCid');
	var cname = $('li[data-role=city][data-id='+cid+']').find('span').html();
	var pname = $('li[data-role=province][data-id='+pid+']').find('span').html();
	alert(pname+' '+cname+' '+currentName);
	menu.closeAllPanels();
	});
	});
	$(function(){
	FastClick.attach(document.body);
	})
	</script>
	</head>

	<body>
	<a href="#menu">点击</a>
	<nav id="menu">
	<ul id="provinceName" class="mm-listview">
	</ul>
	</nav>
	</body>
	</html> 效果：点击后从底部弹起

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航