Jquery Select2 使用纪要

1<div class="row">
2					<div class="col-md-3">
3						<div class="form-group">
4							<label class="control-label">分支机构所在省</label>
5							<div class="controls">
6								<%-- 	<s:select name="branchProvince" list="regionProvinceMap" requiredLabel="true" /> --%>
7								<s:textfield name="masterBranch.branchProvince"
8									requiredLabel="true" />
9							</div>
10						</div>
11					</div>
12					<div class="col-md-3">
13						<div class="form-group">
14							<label class="control-label">所在市</label>
15							<div class="controls">
16								<s:textfield name="masterBranch.branchCity" requiredLabel="true" />
17							</div>
18						</div>
19					</div>
20
21					<div class="col-md-3">
22						<div class="form-group">
23							<label class="control-label">所在区县</label>
24							<div class="controls">
25								<s:textfield name="masterBranch.branchCounty"
26									requiredLabel="true" />
27							</div>
28						</div>
29					</div>
30
31					<div class="col-md-3">
32						<div class="form-group">
33							<label class="control-label">详细地址</label>
34							<div class="controls">
35								<s:textfield name="masterBranch.branchAddres"
36									requiredLabel="true" />
37							</div>
38						</div>
39					</div>
40				</div>
41
42
43
44
45
46var $branchProvince = $form
47									.find("input[name='masterBranch.branchProvince']");
48							var $branchCity = $form
49									.find("input[name='masterBranch.branchCity']");
50							var $branchCounty = $form
51									.find("input[name='masterBranch.branchCounty']");
52
53							$branchProvince
54									.select2({
55										placeholder : "选择所在省",
56										allowClear : true,
57										minimumInputLength : 0,
58										multiple : false,
59										ajax : {
60											url : WEB_ROOT
61													+ "/sys/data-dict!findByPrimaryKey.json?primaryKey=ADMINISTRATIVE_REGION_CN",
62											dataType : 'json',
63											data : function(term, page) {
64												return {
65													q : term
66												};
67											},
68											results : function(data, page) {
69												var rst = [];
70												// 修改成合适的数据格式 [{id:text}]
71												$.each(data, function(i, n) {
72													rst.push({
73														id : i,
74														text : n
75													});
76												});
77												return {
78													results : rst
79												};
80											}
81										}
82									});
83
84							$branchCity
85									.select2({
86										placeholder : "选择城市",
87										allowClear : true,
88										minimumInputLength : 0,
89										multiple : false,
90										ajax : {
91											url : function() {
92												var val = $branchProvince
93														.select2("val");
94												if (val == '') {
95													return '#';
96												}
97												return WEB_ROOT
98														+ "/sys/data-dict!findByPrimaryKey.json?primaryKey="
99														+ val;
100											},
101											dataType : 'json',
102											data : function(term, page) {
103												return {
104													q : term
105												};
106											},
107											results : function(data, page) {
108												var rst = [];
109												// 修改成合适的数据格式 [{id:text}]
110												$.each(data, function(i, n) {
111													rst.push({
112														id : i,
113														text : n
114													});
115												});
116												return {
117													results : rst
118												};
119											}
120										}
121									});
122
123							$branchCounty
124									.select2({
125										placeholder : "选择区县",
126										allowClear : true,
127										minimumInputLength : 0,
128										multiple : false,
129										ajax : {
130											url : function() {
131												var val = $branchCity
132														.select2("val");
133												if (val == '') {
134													return '#';
135												}
136												return WEB_ROOT
137														+ "/sys/data-dict!findByPrimaryKey.json?primaryKey="
138														+ val;
139											},
140											dataType : 'json',
141											data : function(term, page) {
142												return {
143													q : term
144												};
145											},
146											results : function(data, page) {
147												var rst = [];
148												// 修改成合适的数据格式 [{id:text}]
149												$.each(data, function(i, n) {
150													rst.push({
151														id : i,
152														text : n
153													});
154												});
155												return {
156													results : rst
157												};
158											}
159										}
160									});
161
162							$branchProvince.on("change", function(e) {
163								// alert("change "+JSON.stringify({val:e.val,
164								// added:e.added, removed:e.removed}));
165								$branchCity.select2('val', '');
166								$branchCounty.select2('val', '');
167							}).on("select2-removed", function(e) {
168								// alert("change "+JSON.stringify({val:e.val,
169								// added:e.added, removed:e.removed}));
170								$branchCity.select2('val', '');
171								$branchCounty.select2('val', '');
172							});
173
174							$branchCity.on("change", function(e) {
175								// alert("change "+JSON.stringify({val:e.val,
176								// added:e.added, removed:e.removed}));
177								$branchCounty.select2('val', '');
178							}).on("select2-removed", function(e) {
179								// alert("change "+JSON.stringify({val:e.val,
180								// added:e.added, removed:e.removed}));
181								$branchCounty.select2('val', '');
182							});
183
184						}
185					});

待续