Jquery Select2 使用纪要

原创
2014/11/20 12:21
阅读数 1.7K


<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', '');
							});

						}
					});


待续


























展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部