利用jQuery实现电商包邮城市选择代码



12 46 16



特效描述:利用jQuery实现 电商包邮城市 选择代码,利用jQuery实现电商包邮城市选择代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/RegionalChoice.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/RegionalChoice.js"></script>

3. HTML代码

<div class="form-group">
	<label class="col-sm-2 control-label text-right">不参与单品包邮地区</label>
	<div class="col-sm-9 col-xs-12">
		<div id="areas" class="form-control-static"></div>
		<a href="javascript:;" class="btn btn-default" data-toggle="modal" data-target="#myModal">添加不参加满包邮的地区</a>
		<input type="hidden" id="selectedareas" name="edareas" value="">
		<span class="help-block">如果设置0或空,则不支持满件包邮</span>
	</div>
</div>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					选择区域
				</h4>
			</div>
			<div class="modal-body">
				<div class="test-div">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary btntest1">
					确定
				</button>
			</div>
		</div>
	</div>
</div>
<script>
$(function () {
	//------生成地区
	GetRegionPlug();
	//------选择后确定按钮
	$(".btntest1").click(function () {
		var areas = GetChecked().join(",");//已选择的城市名
		$("#areas").html(areas);//显示在页面
		$("#selectedareas").val(areas);//存入隐藏的input
		$('#myModal').modal('hide');//完后隐藏模态框
	})
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 按钮控制 全选/反选

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到