基于bootstrap的城市选择器省市县（区）联动下拉控件的使用

最新推荐文章于 2025-09-22 17:12:46 发布

原创最新推荐文章于 2025-09-22 17:12:46 发布 · 置顶 · 4w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #bootstrap #选择器

本文介绍了如何使用基于Bootstrap的城市选择控件，该控件提供全国所有城市的选项并支持输入框的模糊查询功能。通过引用特定文件，可以从GitHub链接下载相关插件。鼓励读者在体验后对项目进行star支持，并在遇到问题时留言讨论。

bootstrap城市选择控件

控件效果如下图所示：

支持全国所有城市的选择。支持input框搜索模糊查询城市

使用方法：

1.按照顺序引入的文件，相关插件下载地址在文章末尾的GitHub网址：

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />

script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/city-picker.data.js"></script>
<script src="js/city-picker.js"></script>
<script src="js/main.js"></script>

2.在前端页面中插入下面的代码：

<div class="docs-methods">
		<form class="form-inline">
			<div id="distpicker">
				<div class="form-group">
					<div style="position: relative;">
						<input id="city-picker3" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-warning" id="reset" type="button">重置</button>
					<button class="btn btn-danger" id="destroy" type="button">确定</button>
				</div>
			</div>
		</form>
	</div>

引入成功！

插件下载地址：https://github.com/Nemo0000/MyProject

如果感觉有帮助，请在gitbug上面点击星号star支持一下！谢谢！