文档章节

Jquery Select2 使用纪要

筱龙缘
 筱龙缘
发布于 2014/11/20 12:21
字数 421
阅读 516
收藏 0


<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label class="control-label">分支机构所在省</label>
							<div class="controls">
								<%-- 	<s:select name="branchProvince" list="regionProvinceMap" requiredLabel="true" /> --%>
								<s:textfield name="masterBranch.branchProvince"
									requiredLabel="true" />
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="control-label">所在市</label>
							<div class="controls">
								<s:textfield name="masterBranch.branchCity" requiredLabel="true" />
							</div>
						</div>
					</div>

					<div class="col-md-3">
						<div class="form-group">
							<label class="control-label">所在区县</label>
							<div class="controls">
								<s:textfield name="masterBranch.branchCounty"
									requiredLabel="true" />
							</div>
						</div>
					</div>

					<div class="col-md-3">
						<div class="form-group">
							<label class="control-label">详细地址</label>
							<div class="controls">
								<s:textfield name="masterBranch.branchAddres"
									requiredLabel="true" />
							</div>
						</div>
					</div>
				</div>



var $branchProvince = $form
									.find("input[name='masterBranch.branchProvince']");
							var $branchCity = $form
									.find("input[name='masterBranch.branchCity']");
							var $branchCounty = $form
									.find("input[name='masterBranch.branchCounty']");

							$branchProvince
									.select2({
										placeholder : "选择所在省",
										allowClear : true,
										minimumInputLength : 0,
										multiple : false,
										ajax : {
											url : WEB_ROOT
													+ "/sys/data-dict!findByPrimaryKey.json?primaryKey=ADMINISTRATIVE_REGION_CN",
											dataType : 'json',
											data : function(term, page) {
												return {
													q : term
												};
											},
											results : function(data, page) {
												var rst = [];
												// 修改成合适的数据格式 [{id:text}]
												$.each(data, function(i, n) {
													rst.push({
														id : i,
														text : n
													});
												});
												return {
													results : rst
												};
											}
										}
									});

							$branchCity
									.select2({
										placeholder : "选择城市",
										allowClear : true,
										minimumInputLength : 0,
										multiple : false,
										ajax : {
											url : function() {
												var val = $branchProvince
														.select2("val");
												if (val == '') {
													return '#';
												}
												return WEB_ROOT
														+ "/sys/data-dict!findByPrimaryKey.json?primaryKey="
														+ val;
											},
											dataType : 'json',
											data : function(term, page) {
												return {
													q : term
												};
											},
											results : function(data, page) {
												var rst = [];
												// 修改成合适的数据格式 [{id:text}]
												$.each(data, function(i, n) {
													rst.push({
														id : i,
														text : n
													});
												});
												return {
													results : rst
												};
											}
										}
									});

							$branchCounty
									.select2({
										placeholder : "选择区县",
										allowClear : true,
										minimumInputLength : 0,
										multiple : false,
										ajax : {
											url : function() {
												var val = $branchCity
														.select2("val");
												if (val == '') {
													return '#';
												}
												return WEB_ROOT
														+ "/sys/data-dict!findByPrimaryKey.json?primaryKey="
														+ val;
											},
											dataType : 'json',
											data : function(term, page) {
												return {
													q : term
												};
											},
											results : function(data, page) {
												var rst = [];
												// 修改成合适的数据格式 [{id:text}]
												$.each(data, function(i, n) {
													rst.push({
														id : i,
														text : n
													});
												});
												return {
													results : rst
												};
											}
										}
									});

							$branchProvince.on("change", function(e) {
								// alert("change "+JSON.stringify({val:e.val,
								// added:e.added, removed:e.removed}));
								$branchCity.select2('val', '');
								$branchCounty.select2('val', '');
							}).on("select2-removed", function(e) {
								// alert("change "+JSON.stringify({val:e.val,
								// added:e.added, removed:e.removed}));
								$branchCity.select2('val', '');
								$branchCounty.select2('val', '');
							});

							$branchCity.on("change", function(e) {
								// alert("change "+JSON.stringify({val:e.val,
								// added:e.added, removed:e.removed}));
								$branchCounty.select2('val', '');
							}).on("select2-removed", function(e) {
								// alert("change "+JSON.stringify({val:e.val,
								// added:e.added, removed:e.removed}));
								$branchCounty.select2('val', '');
							});

						}
					});


待续


























© 著作权归作者所有

筱龙缘

筱龙缘

粉丝 20
博文 29
码字总数 13048
作品 1
南京
程序员
私信 提问
使用jquery实现权限添加的效果

两个列表都可以多选, 实现如下效果: 1、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除,山东海运青岛港推动经济新发展 2、点击按钮,实现对...

墙头草
2011/08/31
0
0
jquery select2()的用法

用jquery的select2()插件写了一个自动补全的搜索框,jquery版本是:1.10.2 select2()版本是3.5.4 部分代码如下:只要加上ajax属性就报:Uncaught Error: Option 'ajax' is not allowed for Sele......

easonjiven
2015/09/02
14.3K
2
jQuery取得select选择的文本与值

jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取selec......

donny945
2014/10/10
0
0
6月份最受欢迎的 15 个新的 jQuery 插件

每个月我们都会将上个月最新的和最受欢迎一些 jQuery 插件推荐给大家,现在让我们来看看上个月的最新热门 jQuery 插件吧。 1. jQuery++ jQuery++ 在 jQuery 1.7.x 的基础上增加了一些 DOM 助...

oschina
2012/07/04
5.1K
5
select2 4.0 如何绑定值

html代码: 效果: 需要的结果(绑上的值应该显示在输入框里):

kushu001
2015/08/26
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

ant 中的fileset include等拷贝

拷贝一个目录到指定目录下 例:<copy todir="${basedir}/new"> <fileset dir="${basedir}/old"> <include name="appgen" /> <include name="appgen/" /> <include name=appgen/**" /> <incl......

shzwork
10分钟前
1
0
react-jianshu项目的创建

创建项目 1、github上创建仓库react-jianshu 2、将项目克隆到本地git clone git@github.com:startjcu/react-jianshu.git 3、在当前目录(项目目录的上级目录)下执行create-react-app react-...

星闪海洋
19分钟前
2
0
OSChina 周二乱弹 —— 小哥哥,你可以教我写代码吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @nnnm: 生活大爆炸,结束了,这部陪伴了漫长时间的情景喜剧,最终是以诺贝尔奖和大团圆收尾的。虽然,不算精彩,但也是温馨。而少年谢尔顿的...

小小编辑
今天
235
11
typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部