中国省市区地址三级联动jQuery插件
16lz
2021-01-22
中国省市区地址三级联动jQuery插件
这个插件从https://www.jq22.com上下载的插件，并将我个人认为是多与代码删除之后的效果。
除了bootstrap和jquery等相关的必要的css和js文件之外，还需要引入 distpicker.data.js、distpicker.js、main.js这三个文件。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'Address.jsp' starting page</title>
<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">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please <a
href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p>
<![endif]-->
<div class="jq22-container">
<div class="container">
<h4>中国省市区地址三级联动jQuery插件</h4>
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province1">Province</label> <select
class="form-control" id="province1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city1">City</label> <select
class="form-control" id="city1"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district1">District</label> <select
class="form-control" id="district1"></select>
</div>
</div>
</form>
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province2">Province</label> <select
class="form-control" id="province2" data-province="---- 选择省 ----"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city2">City</label> <select
class="form-control" id="city2" data-city="---- 选择市 ----"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district2">District</label> <select
class="form-control" id="district2" data-district="---- 选择区 ----"></select>
</div>
</div>
</form>
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province3">Province</label> <select
class="form-control" id="province3" data-province="浙江省"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city3">City</label> <select
class="form-control" id="city3" data-city="杭州市"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district3">District</label> <select
class="form-control" id="district3" data-district="西湖区"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker1">
<div class="form-group">
<label class="sr-only" for="province4">Province</label> <select
class="form-control" id="province4"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city4">City</label> <select
class="form-control" id="city4"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district4">District</label> <select
class="form-control" id="district4"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker2">
<div class="form-group">
<label class="sr-only" for="province5">Province</label> <select
class="form-control" id="province5"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city5">City</label> <select
class="form-control" id="city5"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district5">District</label> <select
class="form-control" id="district5"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker3">
<div class="form-group">
<label class="sr-only" for="province6">Province</label> <select
class="form-control" id="province6"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city6">City</label> <select
class="form-control" id="city6"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district6">District</label> <select
class="form-control" id="district6"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker">
<div class="form-group">
<label class="sr-only" for="province">Province</label> <select
class="form-control" id="province"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city">City</label> <select
class="form-control" id="city"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district">District</label> <select
class="form-control" id="district"></select>
</div>
<div class="form-group">
<button class="btn btn-primary" id="reset" type="button">Reset</button>
<button class="btn btn-warning" id="reset-deep" type="button">Reset
(deep)</button>
<button class="btn btn-danger" id="destroy" type="button">Destroy</button>
</div>
</div>
</form>
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province7">Province</label> <select
class="form-control" id="province7"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city7">City</label> <select
class="form-control" id="city7"></select>
</div>
</div>
</form>
<form class="form-inline">
<div data-toggle="distpicker">
<div class="form-group">
<label class="sr-only" for="province8">Province</label> <select
class="form-control" id="province8"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker4">
<div class="form-group">
<label class="sr-only" for="province9">Province</label> <select
class="form-control" id="province9"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city9">City</label> <select
class="form-control" id="city9"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district9">District</label> <select
class="form-control" id="district9"></select>
</div>
</div>
</form>
<form class="form-inline">
<div id="distpicker5">
<div class="form-group">
<label class="sr-only" for="province10">Province</label> <select
class="form-control" id="province10"></select>
</div>
<div class="form-group">
<label class="sr-only" for="city10">City</label> <select
class="form-control" id="city10"></select>
</div>
<div class="form-group">
<label class="sr-only" for="district10">District</label> <select
class="form-control" id="district10"></select>
</div>
</div>
</form>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Address/distpicker.data.js"></script>
<script src="js/Address/distpicker.js"></script>
<script src="js/Address/main.js"></script>
</body>
</html>这个是效果图
注:若地址信息有误，可在distpicker.data.js中进行修改
更多相关文章
- [原]jQuery Tab插件，用于在Tab中显示iframe，附源码和详细说明
- 分享27款非常棒的 jQuery 表单插件
- 在Wordpress中包含一个github jquery插件
- 推荐一款好用的jquery弹出层插件——wbox
- JQuery滚动条插件jScrollPane的详细使用(除去点击边框)
- jqueryui autocomplete 插件 点击 显示选项设置方法
- JQuery标签输入插件ASP.NET不工作
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- jQuery插件制作备忘