全部
全部 教程 模板 代码 软件 办公 文章
JQuery带字母分类可搜索的城市选择器插件代码

JQuery带字母分类可搜索的城市选择器插件代码

添加时间：2021-03-21 15:21:33
站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!
赞助一下
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型：搜索框
  • 模板颜色模板颜色：初级
  • 下载积分下载积分：28 米粒
  • 下载权限下载权限：

    赞助会员

当前位置：

  • 前端特效
  • DIVCSS

    • 一款JQuery带字母分类可搜索的城市选择器插件代码，有多种设定效果可以选择：单选、多选、固定值、禁止选择等等，演示页面里已经有了非常详细的参数说明和教程了，喜欢的童鞋请收下吧。
    JQuery带字母分类可搜索的城市选择器插件代码
    分类：表单代码 > 搜索框 难易：初级

    页面的head部分，引入一个CSS样式文件即可，代码如下：

    <link type="text/css" rel="stylesheet" href="css/city-select.css">

    页面的body部分，包含了多个参数说明和范例介绍等，代码如下：

    <h2>Options</h2>
<div class="info">
	<table border="0" width="100%">
		<tr>
			<th>名称</th>
			<th>类型</th>
			<th>默认</th>
			<th>描述</th>
		</tr>
		<tr>
			<td>dataJson</td>
			<td>[Array]</td>
			<td>默认空</td>
			<td>城市数据源</td>
		</tr>
		<tr>
			<td>convert</td>
			<td>[Boolean]</td>
			<td>true(转换)</td>
			<td>转换数据，引入的数据源是citydata.js就需要转换；引入的是newcitydata.js就不需要</td>
		</tr>
		<tr>
			<td>shorthand</td>
			<td>[Boolean]</td>
			<td>false(全称)</td>
			<td>名称的全称、简称</td>
		</tr>
		<tr>
			<td>multiSelect</td>
			<td>[Boolean]</td>
			<td>false(单选)</td>
			<td>多选、单选</td>
		</tr>
		<tr>
			<td>search</td>
			<td>[Boolean]</td>
			<td>true(搜索)</td>
			<td>开启搜索</td>
		</tr>
		<tr>
			<td>multiMaximum</td>
			<td>[Number]</td>
			<td>5(最多可选5个城市)</td>
			<td>最多可选的城市个数(多选)</td>
		</tr>
		<tr>
			<td>multiType</td>
			<td>[Number]</td>
			<td>0(多行)</td>
			<td>值允许1或者0；只用于多选，选中的值显示是一行还是多行</td>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>[String]</td>
			<td>'请选择城市'</td>
			<td>默认的提示语</td>
		</tr>
		<tr>
			<td>searchPlaceholder</td>
			<td>[String]</td>
			<td>'输入关键词搜索'</td>
			<td>搜索文本框默认的提示语</td>
		</tr>
		<tr>
			<td>hotCity</td>
			<td>[Array]</td>
			<td>[](取前面18条数据)</td>
			<td>热门城市显示数据，传就生成热门城市，没有就插件生成</td>
		</tr>
		<tr>
			<td>onInit</td>
			<td>[function]</td>
			<td>function () {}</td>
			<td>插件初始化后的回调</td>
		</tr>
		<tr>
			<td>onForbid</td>
			<td>[function]</td>
			<td>function () {}</td>
			<td>插件禁止后再点击的回调</td>
		</tr>
		<tr>
			<td>onTabsAfter</td>
			<td>[function]</td>
			<td>function (target) {}</td>
			<td>点击tabs切换显示城市后的回调</td>
		</tr>
		<tr>
			<td>onTabsForbid</td>
			<td>[function]</td>
			<td>function (target) {}</td>
			<td>tabs禁止后再点击的回调</td>
		</tr>
		<tr>
			<td>onCallerAfter</td>
			<td>[function]</td>
			<td>function (target, values) {}</td>
			<td>选择城市后的回调</td>
		</tr>
	</table>
</div>

<h2>城市单选</h2>
<div class="city-select" id="single-select-1">
	<div class="city-info">
		<div class="city-name">
			<span>北京市</span>
			<span>北京市</span>
			<span>北京市</span>
			<span>北京市</span>
		</div>
		<div class="city-input">
			<input type="text" class="input-search" value="" placeholder="请选择城市" />
		</div>
	</div>
	<ul class="city-list hide">
		<li class="caller active"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
	</ul>
	<div class="city-pavilion hide">
		<div class="city-tabs">
			<a href="javascript:;" class="active">热门城市</a>
			<a href="javascript:;">AB</a>
			<a href="javascript:;">CD</a>
			<a href="javascript:;">EFG</a>
			<a href="javascript:;">H</a>
			<a href="javascript:;">J</a>
			<a href="javascript:;">KL</a>
			<a href="javascript:;" class="forbid">MNP</a>
			<a href="javascript:;">QR</a>
			<a href="javascript:;">S</a>
			<a href="javascript:;">T</a>
			<a href="javascript:;">W</a>
			<a href="javascript:;">X</a>
			<a href="javascript:;">Y</a>
			<a href="javascript:;">Z</a>
		</div>
		<div class="city-cont">
			<dl class="city-HOT">
				<dd>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
					<a href="javascript:;">北京市</a>
				</dd>
			</dl>
			<p>*可以直接搜索查找城市（支持名称、拼音模糊搜索）<a href="javascript:;">清空</a><span>5</span></p>
			<div class="city-tips">最多只能选择<span>5</span>项</div>
		</div>
	</div>
</div><!-- end .city-select -->

<div class="info">
	<h3>单选</h3>
	<p>multiSelect: false</p>
</div>
<div class="info">
	<h3>简称</h3>
	<p>shorthand: true</p>
</div>
<div class="info">
	<h3>开启搜索功能</h3>
	<p>search: true</p>
</div>
<div class="info">
	<h3>设置城市默认</h3>
	<p>singleSelect1.setCityVal('北京市');</p>
</div>

<h2>城市单选-只读</h2>
<div class="city-select" id="single-select-2"></div><!-- end .city-select -->

<div class="info">
	<h3>设置城市默认</h3>
	<p>singleSelect2.setCityVal('北京市');</p>
</div>
<div class="info">
	<h3>只读</h3>
	<p>singleSelect2.showStatus('readonly');</p>
</div>

<h2>城市单选-禁止</h2>
<div class="city-select" id="single-select-3"></div><!-- end .city-select -->

<div class="info">
	<h3>设置城市默认</h3>
	<p>singleSelect3.setCityVal('广州市');</p>
</div>
<div class="info">
	<h3>禁止</h3>
	<p>singleSelect3.showStatus('disabled');</p>
</div>

<h2>城市多选</h2>
<div class="city-select" id="multi-select-1"></div><!-- end .city-select -->

<div class="info">
	<h3>开启多选功能</h3>
	<p>multiSelect: true</p>
</div>
<div class="info">
	<h3>设置最多可选择的个数</h3>
	<p>multiMaximum: 6</p>
</div>
<div class="info">
	<h3>关闭搜索功能</h3>
	<p>search: false</p>
</div>
<div class="info">
	<h3>设置城市默认</h3>
	<p>MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');</p>
</div>

<h2>城市多选-自定义热门城市-搜索</h2>
<div class="city-select" id="multi-select-2"></div><!-- end .city-select -->

<div class="info">
	<h3>开启多选功能</h3>
	<p>multiSelect: true</p>
</div>
<div class="info">
	<h3>自定义热门城市</h3>
	<p>hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市']</p>
</div>
<div class="info">
	<h3>开启搜索功能</h3>
	<p>search: true</p>
</div>

<h2>Methods</h2>
<div class="info">
	<h3>设置城市默认</h3>
	<p>setCityVal(val)</p>
	<p>传入的参数是用字符串的形式：'北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市'</p>
	<p class="careful">注意: 如果设置的城市超过multiMaximum设置的限制的个数，多出的是不会生效</p>
</div>
<div class="info">
	<h3>获取城市的值</h3>
	<p>getCityVal()</p>
	<p>可以拿到选中的城市的值</p>
	<p class="careful">注意: 只有在有选择城市的情况下，才能拿到城市的值或者是设置默认值后</p>
</div>
<div class="info">
	<h3>更新城市数据</h3>
	<p>update(data)</p>
	<p>栗子：singleSelect.update([{
		"id": "110100",
		"name": "北京市",
		"parentId": "110000",
		"shortName": "北京",
		"letter": "B",
		"cityCode": "010",
		"pinyin": "Beijing"
	},
	{
		"id": "120100",
		"name": "天津市",
		"parentId": "120000",
		"shortName": "天津",
		"letter": "T",
		"cityCode": "022",
		"pinyin": "Tianjin"
	}]);</p>
</div>
<div class="info">
	<h3>城市状态</h3>
	<p>status(status)</p>
	<p>参数是readonly或disabled</p>
</div>
<div class="info">
	<h3>清空所有选中的值</h3>
	<p>clear()</p>
</div>
<div class="info">
	<h3>绑定事件</h3>
	<p>bindEvent()</p>
</div>
<div class="info">
	<h3>销毁事件</h3>
	<p>unBindEvent()</p>
</div>

    页面的底部，引入jQuery库和两个JS文件，请启用插件设置好相关参数，代码如下：

    <script src="js/jquery.js"></script>
<script type="text/javascript" src="js/citydata.min.js"></script>
<script type="text/javascript" src="js/cityselect-1.0.0.min.js"></script>
<script type="text/javascript">
$(function() {
	// 单选
	var singleSelect1 = $('#single-select-1').citySelect({
		dataJson: cityData,
		multiSelect: false,
		shorthand: true,
		search: true,
		onInit: function () {
			console.log(this)
		},
		onTabsAfter: function (target) {
			console.log(target)
		},
		onCallerAfter: function (target, values) {
			console.log(JSON.stringify(values))
		}
	});

	// 单选设置城市
	singleSelect1.setCityVal('北京市');

	// 单选
	var singleSelect2 = $('#single-select-2').citySelect({
		dataJson: cityData
	});

	// 单选设置城市
	singleSelect2.setCityVal('北京市');

	// 禁止点击显示的接口
	singleSelect2.status('readonly');

	//单选
	var singleSelect3 = $('#single-select-3').citySelect({
		dataJson: cityData
	});

	// 单选设置城市
	singleSelect3.setCityVal('广州市');

	// 禁止点击显示的接口
	singleSelect3.status('disabled');

	// 多选
	var MulticitySelect1 = $('#multi-select-1').citySelect({
		dataJson: cityData,
		multiSelect: true,
		multiMaximum: 6,
		search: false,
		onInit: function () {
			console.log(this)
		},
		onForbid: function () {
			console.log(this)
		},
		onTabsAfter: function (target) {
			console.log(event)
		},
		onCallerAfter: function (target, values) {
			console.log(JSON.stringify(values))
		}
	});

	// 多选设置城市接口
	MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');

	// 多选-自定义热门城市-搜索
	var MulticitySelect2 = $('#multi-select-2').citySelect({
		dataJson: cityData,
		multiSelect: true,
		search: true,
		multiType: 1,
		hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市'],
		onInit: function () {
			console.log(this)
		},
		onForbid: function () {
			console.log(this)
		},
		onTabsAfter: function (target) {
			console.log(event)
		},
		onCallerAfter: function (target, values) {
			console.log(JSON.stringify(values))
		}
	});

	// 多选设置城市接口
	MulticitySelect2.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');

});
</script>
    上一篇：js浮动层提示框点击按钮展开css3浮动层提示框
    下一篇：网格布局的分类扩展卡片
    相关内容推荐
    资源求助发帖
    查看更多发帖

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    热点内容推荐

    发帖找资源

    标题：JQuery带字母分类可搜索的城市选择器插件代码

    *

    描述：
    平均回复时间：3-10分钟
    规则介绍：悬赏寻求论坛网友分享资源，站点对分享内容的准确性，合法性，版权等没有足够的监管能力。如果您发现资源不正确，无法使用，不符合法律法律等情况，您可以直接举报资源。站长将尽快核实您的举报，并根据情况，采取封号，退换米粒等处理。

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    阅读权限：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    • 背景波浪
    • 背景波浪
    • 波浪
    • 波浪
    互联网
    IT编程
    技能技巧
    学习教程
    干货福利
    职业考试

    • 微信客服微信客服
    • qq客服QQ客服
    • qq群QQ群

    聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6

    Copyright(C)web.com, All Rights Reserved.

    客服
    在线咨询
    周一 至 周日 9:00 ~ 22:00
    QQ：1326974360
    微信：juyoubuluo6688
    客服热线
    18205485173
    工作日 9:00 ~ 18:00
    微信扫码咨询
    客户服务
    欢迎咨询服务
    咨询量较多时，请耐心等待
    福利
    福利
    社群

    关注公众号

    获取更多资讯

    扫码进群(QQ)

    与更多大牛交流沟通

    反馈
    0.098639s