Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
wangdaping
/
wp
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: 9395290610
Gałęzie Tagi
wp
/
nwyj
/
.svn
/
pristine
/
4c
/
4c3c0b92404f7aa238d66b0fc1bdee997c193e4f.svn-base

4c3c0b92404f7aa238d66b0fc1bdee997c193e4f.svn-base 19 KB
Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 

  5. <title>单选下拉框</title>
    6. 

  6. <!--框架必需start-->
    7. 

  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    8. 

  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    9. 

  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
    10. 

  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    11. 

  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    12. 

  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
    13. 

  13. <!--框架必需end-->
    14. 

  14. </head>
    15. 

  15. <body>
    16. 

  16.    <div class="box1" panelWidth="800">
    17. 

  17.    		 <fieldset> 
    18. 

  18. 			<legend>1、json数据模式（json数据源）</legend>
    19. 

  19. 			使用url属性获取数据：
    20. 

  20. 			 <div class="red">此示例由后台支持</div>
    21. 

  21. 			 <!--
    22. 

  22. 			<select prompt="请选择" url="../../userAction.do?method=getUsersOfListFormation" id="sel-1-1"></select>
    23. 

  23. 			-->
    24. 

  24. 			<br/>
    25. 

  25. 			<input type="button" value="获取选中值" onclick="getSelectedItem()"/>
    26. 

  26. 			<br/>
    27. 

  27. 			<br/>
    28. 

  28. 			使用url属性+参数获取数据：
    29. 

  29. 			 <div class="red">此示例由后台支持</div>
    30. 

  30. 			 <!--
    31. 

  31. 			<select url="../../userAction.do?method=getUsersOfListFormation" prompt="请选择员工" params='{"userinfor.organization.orgId":"3"}'></select>
    32. 

  32. 			-->
    33. 

  33. 			<br/>
    34. 

  34. 			<br/>
    35. 

  35. 			赋值给标签的data属性：<br/>
    36. 

  36. 			<select prompt="请选择员工" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}'></select>
    37. 

  37. 			<br/>注意：使用json格式的字符串时所有节点的属性名与值都必须使用双引号
    38. 

  38. 			<br/>
    39. 

  39. 			<br/>
    40. 

  40. 			动态设置data（本地数据源）<br/>
    41. 

  41. 			<select prompt="请选择员工" id="sel-1-2" keepDefaultStyle="true"></select>
    42. 

  42. 			<br/>
    43. 

  43. 			<br/>
    44. 

  44. 			动态设置data（远程数据源）
    45. 

  45. 			 <div class="red">此示例由后台支持</div>
    46. 

  46. 			 <!--
    47. 

  47. 			<select prompt="请选择员工" id="sel-1-3" keepDefaultStyle="true"></select>
    48. 

  48. 			-->
    49. 

  49. 	  </fieldset>
    50. 

  50. 	  <div class="height_15"></div>
    51. 

  51. 	  
    52. 

  52. 	  <fieldset> 
    53. 

  53. 			<legend>2、本地模式</legend>
    54. 

  54. 			<select>
    55. 

  55. 			    <option value="">请选择功能</option>
    56. 

  56. 			    <option value="0">新增图片</option>
    57. 

  57. 			    <option value="1">维护图片</option>
    58. 

  58. 			    <option value="2">新增新闻</option>
    59. 

  59. 			</select>
    60. 

  60. 	  </fieldset>
    61. 

  61. 	  <div class="height_15"></div>
    62. 

  62. 	  
    63. 

  63. 	   <fieldset> 
    64. 

  64. 			<legend>3、禁用/启用</legend>
    65. 

  65. 			<select disabled="true"  id="sel-3"  data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}'></select>
    66. 

  66. 			<br/>
    67. 

  67. 			<input type="button" value="启用" onclick="enableSelect()" style="width:105px;"/>
    68. 

  68. 			<input type="button" value="禁用" onclick="disableSelect()" style="width:105px;"/>
    69. 

  69. 			
    70. 

  70. 	  </fieldset>
    71. 

  71. 	  
    72. 

  72.    	  <fieldset> 
    73. 

  73. 			<legend>4、change事件</legend>
    74. 

  74. 			使用bind方法绑定change事件<br/>
    75. 

  75. 			<select id="sel-4" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}'></select>
    76. 

  76. 			<br/>
    77. 

  77. 			<br/>
    78. 

  78. 			也可以使用标签自带的onchange<br/>
    79. 

  79. 			<select data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' onchange="onchangeHandler(this)"></select>
    80. 

  80. 	  </fieldset>
    81. 

  81. 	  <div class="height_15"></div>
    82. 

  82. 	  
    83. 

  83. 	 
    84. 

  84. 	  <fieldset> 
    85. 

  85. 			<legend>5、使用optgroup进行分组（仅本地模式可以）</legend>
    86. 

  86. 			<select>
    87. 

  87. 				<option>请选择权限</option>
    88. 

  88. 				<optgroup label="首页信息发布">
    89. 

  89. 					<option value="新增图片">新增图片</option>
    90. 

  90. 					<option value="维护图片">维护图片</option>
    91. 

  91. 					<option value="新增新闻">新增新闻</option>
    92. 

  92. 				</optgroup>
    93. 

  93. 				<optgroup label="人员维护">
    94. 

  94. 					 <option value="新增用户">新增用户</option>
    95. 

  95. 			         <option value="用户列表">用户列表</option>
    96. 

  96. 				</optgroup>
    97. 

  97. 			</select>
    98. 

  98. 	  </fieldset>
    99. 

  99. 	  <div class="height_15"></div>
    100. 

  100. 	  
    101. 

  101. 	   <fieldset> 
    102. 

  102. 			<legend>6、宽度、高度与方向</legend>
    103. 

  103. 			下拉框默认为120px宽度，当有较长的选项时，下拉框宽度默认不变，而选项容器宽度自适应<br/>
    104. 

  104. 			<select>
    105. 

  105. 			    <option value="">请选择功能</option>
    106. 

  106. 			    <option value="0">我是很长很长很长很长很长很长很长很长的选项</option>
    107. 

  107. 			    <option value="1">维护图片</option>
    108. 

  108. 			    <option value="2">新增新闻</option>
    109. 

  109. 			</select>
    110. 

  110. 			<br/><br/>
    111. 

  111. 			单独设置下拉框宽度，选项容器宽度默认不会小于下拉框宽度<br/>
    112. 

  112. 			<select selWidth="260">
    113. 

  113. 			    <option value="">请选择功能</option>
    114. 

  114. 			    <option value="1">维护图片</option>
    115. 

  115. 			    <option value="2">新增新闻</option>
    116. 

  116. 			</select>
    117. 

  117. 			
    118. 

  118. 			<br/><br/>自定义容器高度：<br/>
    119. 

  119. 			<select boxHeight="100" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"},{"value":"2","key":"员工2"}]}'></select>
    120. 

  120. 			<br/><br/>强制向上展开：<br/>
    121. 

  121. 			<select data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' openDirection="top"></select>
    122. 

  122. 	  </fieldset>
    123. 

  123. 	  <div class="height_15"></div>
    124. 

  124. 	  
    125. 

  125. 	  
    126. 

  126. 	   <fieldset> 
    127. 

  127. 			<legend>7、可编辑</legend>
    128. 

  128. 			<select data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' editable="true" id="sel-7"></select><br/>
    129. 

  129. 			<input type="button" value="获取值" onclick="getEditableValue()"/>
    130. 

  130. 	  </fieldset>
    131. 

  131. 	  <div class="height_15"></div>
    132. 

  132. 	  
    133. 

  133. 	   <fieldset> 
    134. 

  134. 			<legend>8、自定义列数</legend>
    135. 

  135. 			<select colNum="3" colWidth="80"  data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"},{"value":"5","key":"员工5"},{"value":"6","key":"员工6"}]}'></select>
    136. 

  136. 			<br/><br/>
    137. 

  137. 	  </fieldset>
    138. 

  138. 	  <div class="height_15"></div>
    139. 

  139. 	  
    140. 

  140. 	  <fieldset> 
    141. 

  141. 			<legend>9、联动</legend>
    142. 

  142. 			 <div class="red">此示例由后台支持</div>
    143. 

  143. 			<!--
    144. 

  144. 			<table>
    145. 

  145. 				<tr>
    146. 

  146. 					<td>
    147. 

  147. 					<select id="sel-9-1"  url="../../organizationAction.do?method=getDepartments&parentid=0" prompt="请选择公司" 
    148. 

  148. 			  		 childId="sel-9-2" childDataPath="../../organizationAction.do?method=getDepartments&parentid=" ></select>
    149. 

  149. 					</td>
    150. 

  150. 					<td>
    151. 

  151. 					<select id="sel-9-2"   prompt="请选择部门" childDataPath="../../userAction.do?method=getUsersOfListFormation&userinfor.organization.orgId="
    152. 

  152. 			   			childId="sel-9-3"></select>
    153. 

  153. 					</td>
    154. 

  154. 					<td>
    155. 

  155. 					<select id="sel-9-3"   prompt="请选择员工"></select>
    156. 

  156. 					</td>
    157. 

  157. 				</tr>
    158. 

  158. 			</table>
    159. 

  159. 			<br/>
    160. 

  160. 			<br/>
    161. 

  161. 			联动下拉框加载数据完成后的回调函数：
    162. 

  162. 			<table>
    163. 

  163. 				<tr>
    164. 

  164. 					<td>
    165. 

  165. 				<select id="sel-9-4"  url="../../organizationAction.do?method=getDepartments&parentid=0" prompt="请选择公司"
    166. 

  166. 				    childId="sel-9-5" childDataPath="../../organizationAction.do?method=getDepartments&parentid=" ></select>	
    167. 

  167. 					</td>
    168. 

  168. 					<td>
    169. 

  169. 				<select id="sel-9-5"  prompt="请选择部门" childDataPath="../../userAction.do?method=getUsersOfListFormation&userinfor.organization.orgId=" 
    170. 

  170. 					childId="sel-9-6"></select>
    171. 

  171. 					</td>
    172. 

  172. 					<td>
    173. 

  173. 				<select id="sel-9-6"  prompt="请选择员工" ></select>
    174. 

  174. 					</td>
    175. 

  175. 				</tr>
    176. 

  176. 			</table>
    177. 

  177. 			<p>在这里监听第二个下拉框的加载完成事件，来重置第三个下拉框。</p>
    178. 

  178. 			<br/>
    179. 

  179. 			初始时赋值
    180. 

  180. 			<table>
    181. 

  181. 				<tr>
    182. 

  182. 					<td>
    183. 

  183. 					<select id="sel-9-7"  url="../../organizationAction.do?method=getDepartments&parentid=0" selectedValue="1" prompt="请选择公司" 
    184. 

  184. 			  		 childId="sel-9-8" childDataPath="../../organizationAction.do?method=getDepartments&parentid=" ></select>
    185. 

  185. 					</td>
    186. 

  186. 					<td>
    187. 

  187. 					<select id="sel-9-8"   prompt="请选择部门"  selectedValue="13"></select>
    188. 

  188. 					</td>
    189. 

  189. 				</tr>
    190. 

  190. 			</table>
    191. 

  191. 			-->
    192. 

  192. 			<br/><br/><br/>
    193. 

  193. 			省市县三级联动
    194. 

  194. 			<br/>
    195. 

  195. 			数据写在文件中，不读写数据库，减少服务器负担。<br/>
    196. 

  196. 			<table>
    197. 

  197. 				<tr>
    198. 

  198. 					<td>
    199. 

  199. 					<select id="sel-9-9" childId="sel-9-10"  url="../../sample_html/form/area.xml" prompt="请选择省份" dataType="xml" childDataType="xml" dataRoot="province" labelField="name" valueField="name" openDirection="bottom"></select>
    200. 

  200. 					</td>
    201. 

  201. 					<td>
    202. 

  202. 					<select id="sel-9-10" childId="sel-9-11"  prompt="请选择城市" dataType="xml" childDataType="xml" dataRoot="city" labelField="name" valueField="name" openDirection="bottom"></select>
    203. 

  203. 					</td>
    204. 

  204. 					<td>
    205. 

  205. 					<select id="sel-9-11"  prompt="请选择区" dataType="xml" dataRoot="country" labelField="name" valueField="name" openDirection="bottom"></select>
    206. 

  206. 					</td>
    207. 

  207. 				</tr>
    208. 

  208. 			</table>
    209. 

  209. 			<br/>
    210. 

  210. 			初始时赋值<br/>
    211. 

  211. 			<table>
    212. 

  212. 				<tr>
    213. 

  213. 					<td>
    214. 

  214. 					<select id="sel-9-12" childId="sel-9-13"  url="../../sample_html/form/area.xml" prompt="请选择省份" selectedValue="安徽省" dataType="xml" childDataType="xml" dataRoot="province" labelField="name" valueField="name" openDirection="bottom"></select>
    215. 

  215. 					</td>
    216. 

  216. 					<td>
    217. 

  217. 					<select id="sel-9-13" childId="sel-9-14"  prompt="请选择城市" selectedValue="宣城市" dataType="xml" childDataType="xml" dataRoot="city" labelField="name" valueField="name" openDirection="bottom"></select>
    218. 

  218. 					</td>
    219. 

  219. 					<td>
    220. 

  220. 					<select id="sel-9-14"  prompt="请选择区" selectedValue="宣州区" dataType="xml" dataRoot="country" labelField="name" valueField="name" openDirection="bottom"></select>
    221. 

  221. 					</td>
    222. 

  222. 				</tr>
    223. 

  223. 			</table>
    224. 

  224. 	  </fieldset>
    225. 

  225. 	  <div class="height_15"></div>
    226. 

  226. 	  
    227. 

  227. 	  
    228. 

  228. 	  
    229. 

  229. 	   <fieldset> 
    230. 

  230. 			<legend>10、设置初始时选中值</legend>
    231. 

  231. 			json数据模式：<br/>
    232. 

  232. 			使用selectedValue（推荐）：<br/>
    233. 

  233. 			<select data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' selectedValue="2"></select><br/>
    234. 

  234. 			使用selectedIdx：<br/>
    235. 

  235. 			<select data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' prompt="请选择省份" selectedIdx="1"></select>
    236. 

  236. 			<br/>
    237. 

  237. 			同一个组件不要既设置selectedIdx又设置selectedValue
    238. 

  238. 			<br/><br/>本地模式：<br/>
    239. 

  239. 			<select>
    240. 

  240. 				<option value="">请选择功能</option>
    241. 

  241. 			    <option value="1" selected="selected">新增图片</option>
    242. 

  242. 			    <option value="2">维护图片</option>
    243. 

  243. 			    <option value="3">新增新闻</option>
    244. 

  244. 			</select>
    245. 

  245. 	   </fieldset>
    246. 

  246. 	   <div class="height_15"></div>
    247. 

  247. 	  
    248. 

  248. 	  
    249. 

  249. 	  <fieldset> 
    250. 

  250. 			<legend>11、动态生成下拉框</legend>
    251. 

  251. 			 <div class="red">此示例由后台支持</div>
    252. 

  252. 			<input type="button" value="点击生成（使用url）" id="testBtn" onclick="dynamicSelectbox1()" style="width:150px;"/><br/><br/>
    253. 

  253. 			 <div class="red">此示例由后台支持</div>
    254. 

  254. 			<input type="button" value="点击生成（使用data）" id="testBtn2" onclick="dynamicSelectbox2()" style="width:150px;"/><br/><br/>
    255. 

  255. 			<input type="button" value="点击生成本地下拉框" id="testBtn3" onclick="dynamicSelectbox3()" style="width:150px;"/>
    256. 

  256. 	   </fieldset>
    257. 

  257. 	   <div class="height_15"></div>
    258. 

  258. 	   
    259. 

  259. 	 
    260. 

  260. 	   
    261. 

  261. 	   <fieldset> 
    262. 

  262. 			<legend>12、动态修改下拉框</legend>
    263. 

  263. 			json数据模式:<br/>
    264. 

  264. 			<select prompt="请选择" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' id="sel-12-1"></select>
    265. 

  265. 			<br/><br/><input type="button" value="选中“员工1”" onclick="selectSecondItem1()" style="width:105px;"/>
    266. 

  266. 			<input type="button" value="追加一项" onclick="appendItem1()" style="width:105px;"/>
    267. 

  267. 			<input type="button" value="移除“员工2”" onclick="removeItem1()" style="width:105px;"/>
    268. 

  268. 			
    269. 

  269. 			<br/>
    270. 

  270. 			<br/><br/>
    271. 

  271. 			本地模式:<br/>
    272. 

  272. 			<select   id="sel-12-2">
    273. 

  273. 				<option value="">请选择功能</option>
    274. 

  274. 			    <option value="0">新增图片</option>
    275. 

  275. 			    <option value="1">维护图片</option>
    276. 

  276. 			    <option value="2">新增新闻</option>
    277. 

  277. 			</select>
    278. 

  278. 			<br/><br/><input type="button" value="选中第二项" onclick="selectSecondItem2()" style="width:105px;"/>
    279. 

  279. 			<input type="button" value="追加一项" onclick="appendItem2()" style="width:105px;"/>
    280. 

  280. 			<input type="button" value="移除选中项" onclick="removeItem2()" style="width:105px;"/>
    281. 

  281. 	   </fieldset>
    282. 

  282. 	   <div class="height_15"></div>
    283. 

  283. 	   
    284. 

  284. 	   <fieldset> 
    285. 

  285. 			<legend>13、重置下拉框值</legend>
    286. 

  286. 			<form id="form-14">
    287. 

  287. 				<table class="tableStyle" formMode="transparent" style="width:400px;">
    288. 

  288. 					<tr>
    289. 

  289. 						<td>传统表单元素：</td>
    290. 

  290. 						<td><input type="text"/></td>
    291. 

  291. 					</tr>
    292. 

  292. 					<tr>
    293. 

  293. 						<td>下拉框1：</td>
    294. 

  294. 						<td><select prompt="请选择" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' ></select></td>
    295. 

  295. 					</tr>
    296. 

  296. 					<tr>
    297. 

  297. 						<td>下拉框2：</td>
    298. 

  298. 						<td><select prompt="请选择" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]}' selectedValue="2"></select></td>
    299. 

  299. 					</tr>
    300. 

  300. 					<tr>
    301. 

  301. 						<td colspan="2">
    302. 

  302. 							<input type="button" value="提交"/> 
    303. 

  303. 							<input type="button" value="重置" onclick="resetForm()"/>
    304. 

  304. 						</td>
    305. 

  305. 					</tr>
    306. 

  306. 				</table>
    307. 

  307. 			</form>
    308. 

  308. 	   </fieldset>
    309. 

  309. 	   <div class="height_15"></div>
    310. 

  310. 	   
    311. 

  311. 	    <fieldset> 
    312. 

  312. 			<legend>14、不同表单元素横向排列</legend> 
    313. 

  313. 			由于下拉框设置了float:left属性，如果直接将不同的元素横向排列，则会出现如下效果：<br/><br/>
    314. 

  314. 			姓名：
    315. 

  315. 			<input type="text"/>
    316. 

  316. 			性别：
    317. 

  317. 			<select>
    318. 

  318. 			    <option value="">请选择</option>
    319. 

  319. 			</select>
    320. 

  320. 			<input type="button" value="提交"/><br/><br/><br/><br/>
    321. 

  321. 			这时应该使用table来布局，每个元素放在一个td里面。效果如下：<br/><br/>
    322. 

  322. 			<table>
    323. 

  323. 			<tr>
    324. 

  324. 				<td>姓名：</td>
    325. 

  325. 				<td><input type="text"/></td>
    326. 

  326. 				<td>性别：</td>
    327. 

  327. 				<td>
    328. 

  328. 				<select>
    329. 

  329. 				    <option value="">请选择</option>
    330. 

  330. 				</select>
    331. 

  331. 				</td>
    332. 

  332. 				<td><input type="button" value="提交"/></td>
    333. 

  333. 			</tr>
    334. 

  334. 			</table>
    335. 

  335. 	   </fieldset>
    336. 

  336. 	   <div class="height_15"></div>
    337. 

  337. 	   
    338. 

  338. 	   
    339. 

  339. 	   <fieldset>
    340. 

  340. 			<legend>15、获得选中节点自定义属性</legend>
    341. 

  341. 			<select id="sel-16" prompt="请选择" data='{"list":[{"value":"1","key":"员工1","myFlag":"员工1-自定义属性"},{"value":"2","key":"员工2","myFlag":"员工2-自定义属性"}]}' ></select>
    342. 

  342. 	  </fieldset>
    343. 

  343. 	  <div class="height_15"></div>
    344. 

  344. 	  
    345. 

  345. 	   <fieldset>
    346. 

  346. 			<legend>16、数据无前缀</legend>
    347. 

  347. 			<select prompt="请选择员工" data='[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]'></select>
    348. 

  348. 	  </fieldset>
    349. 

  349. 	  <div class="height_15"></div>
    350. 

  350. 	  
    351. 

  351. 	   
    352. 

  352. 	   
    353. 

  353. 	   
    354. 

  354. 	   <fieldset> 
    355. 

  355. 			<legend>17、浏览器原始下拉框</legend> 
    356. 

  356. 			<select id="sel-15" keepDefaultStyle="true">
    357. 

  357. 			    <option value="">请选择功能</option>
    358. 

  358. 			    <option value="0">新增图片</option>
    359. 

  359. 			    <option value="1">维护图片</option>
    360. 

  360. 			    <option value="2">新增新闻</option>
    361. 

  361. 			</select>
    362. 

  362. 	   </fieldset>
    363. 

  363. 	   <div class="height_15"></div>
    364. 

  364. 

  365. 	</div>
    366. 

  366. 

  367. 

  368. <script type="text/javascript">
    369. 

  369. 	//动态设置data
    370. 

  370. 	function initComplete(){
    371. 

  371. 		var selData={"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]};
    372. 

  372. 		//赋给data
    373. 

  373. 		$("#sel-1-2").data("data",selData)
    374. 

  374.  		//刷新下拉框
    375. 

  375.  		 $("#sel-1-2").render(); 
    376. 

  376. 		
    377. 

  377. 		
    378. 

  378. 		//获取json数据
    379. 

  379. 		/*
    380. 

  380. $.post("../../userAction.do?method=getUsersOfListFormation",{"userinfor.organization.orgId":"13"},function(result){
    381. 

  381. 			//赋给data
    382. 

  382. 			$("#sel-1-3").data("data",result)
    383. 

  383. 	 		//刷新下拉框
    384. 

  384. 	 		 $("#sel-1-3").render(); 
    385. 

  385. 		},"json");
    386. 

  386. */
    387. 

  387. 		
    388. 

  388. 		//绑定change事件
    389. 

  389. 		$("#sel-4").bind("change",function(){
    390. 

  390. 			if(!$(this).attr("relValue")){
    391. 

  391. 		        top.Dialog.alert("没有选择节点");
    392. 

  392. 		    }else{
    393. 

  393. 		        top.Dialog.alert("选中节点文本："+$(this).attr("relText")+"<br/>选中节点值："+$(this).attr("relValue"));
    394. 

  394. 		    }
    395. 

  395. 		})
    396. 

  396. 		
    397. 

  397. 		//"市"下拉框加载数据完成后触发的操作
    398. 

  398. 		$("#sel-9-5").bind("ajaxInit",function(){
    399. 

  399. 	        $("#sel-9-6").render();
    400. 

  400. 		});
    401. 

  401. 		
    402. 

  402. 		$("#sel-9-7").bind("change",function(){
    403. 

  403. 	        $("#sel-9-8").render();
    404. 

  404. 		});
    405. 

  405. 		
    406. 

  406. 		$("#sel-9-10").bind("ajaxInit",function(){
    407. 

  407. 	        $("#sel-9-11").render();
    408. 

  408. 		});
    409. 

  409. 		
    410. 

  410. 		$("#sel-9-13").bind("ajaxInit",function(){
    411. 

  411. 	        $("#sel-9-14").render();
    412. 

  412. 		});
    413. 

  413. 		
    414. 

  414. 		//数据自定义属性
    415. 

  415. 		$("#sel-16").bind("change",function(){
    416. 

  416. 			if(!$(this).attr("relValue")){
    417. 

  417. 		        top.Dialog.alert("没有选择节点");
    418. 

  418. 		    }else{
    419. 

  419. 		        var node=$(this).data("selectedNode");
    420. 

  420. 	            top.Dialog.alert(node.myFlag);
    421. 

  421. 		    }
    422. 

  422. 		})
    423. 

  423. 	}
    424. 

  424. 	
    425. 

  425. 	
    426. 

  426. 	 //获取选中项
    427. 

  427. 	function getSelectedItem(){
    428. 

  428. 		var value = $("#sel-1-1").val();
    429. 

  429. 	    if(value){
    430. 

  430. 	    	value += "（" + $("#sel-1-1").attr("relText") +"）";
    431. 

  431. 	    }else{
    432. 

  432. 	        value = "无";
    433. 

  433. 	    }
    434. 

  434. 		top.Dialog.alert(value);
    435. 

  435. 	}
    436. 

  436. 	
    437. 

  437. 	//设为不可用
    438. 

  438. 	function disableSelect(){
    439. 

  439. 		$("#sel-3").attr("disabled",true);
    440. 

  440. 		$("#sel-3").render();
    441. 

  441. 	}
    442. 

  442. 	//设为可用
    443. 

  443. 	function enableSelect(){
    444. 

  444. 	    $("#sel-3").attr("disabled",false);
    445. 

  445. 		 $("#sel-3").render();
    446. 

  446. 	}
    447. 

  447. 	
    448. 

  448.     //onchange方法
    449. 

  449. 	function onchangeHandler(obj){
    450. 

  450. 	   top.Dialog.alert("您选择了：" + $(obj).val());
    451. 

  451. 	}
    452. 

  452.     
    453. 

  453.     //获取"可编辑"下拉项的值
    454. 

  454. 	function getEditableValue(){
    455. 

  455. 		var text = $("#sel-7").attr("editValue");
    456. 

  456. 		if(!text){
    457. 

  457. 			text = $("#sel-7").attr("prompt");
    458. 

  458. 		}
    459. 

  459. 		top.Dialog.alert(text);
    460. 

  460. 	}
    461. 

  461.     
    462. 

  462.  
    463. 

  463. 	//动态生成下拉框
    464. 

  464. 	function dynamicSelectbox1(){
    465. 

  465. 	/*
    466. 

  466. 	var $selbox = $('<select  prompt="请选择公司"></select>');
    467. 

  467. 		$selbox.attr("url","../../organizationAction.do?method=getDepartments&parentid=0");
    468. 

  468. 		//将下拉框加到按钮的后面
    469. 

  469. 		$("#testBtn").after($selbox);   
    470. 

  470. 		$("#testBtn").after("<br/>"); 
    471. 

  471. 		//渲染下拉框  
    472. 

  472. 		$selbox.render();      
    473. 

  473. */
    474. 

  474. 	}
    475. 

  475. 	
    476. 

  476. 	
    477. 

  477. 	//动态生成下拉框
    478. 

  478. 	function dynamicSelectbox2(){
    479. 

  479. 		//获取json数据
    480. 

  480. 		/*
    481. 

  481. $.post("../../organizationAction.do?method=getDepartments",{"parentid":"2"},function(result){
    482. 

  482. 			var $selbox = $('<select  prompt="请选择部门"></select>');
    483. 

  483. 			//赋给data属性
    484. 

  484. 			$selbox.data("data",result);
    485. 

  485. 			//将下拉框加到按钮的后面
    486. 

  486. 			$("#testBtn2").after($selbox);   
    487. 

  487. 			$("#testBtn2").after("<br/>");  
    488. 

  488. 			//渲染下拉框 
    489. 

  489. 			$selbox.render();      
    490. 

  490. 		},"json");
    491. 

  491. */
    492. 

  492. 	}
    493. 

  493. 	//动态生成下拉框
    494. 

  494. 	function dynamicSelectbox3(){
    495. 

  495. 		var $selbox = $('<select><option value="0">请选择功能</option><option value="1" selected="selected">新增图片</option><option value="2">维护图片</option></select>');
    496. 

  496. 		$("#testBtn3").after($selbox);   //将下拉框加到按钮的后面
    497. 

  497. 		$("#testBtn3").after("<br/>");  
    498. 

  498. 		$selbox.render();      //渲染下拉框
    499. 

  499. 	}
    500. 

  500. 	
    501. 

  501. 	//json数据模式选择
    502. 

  502. 	function selectSecondItem1(){
    503. 

  503. 	    $("#sel-12-1").setValue("1");
    504. 

  504. 	}
    505. 

  505. 	//json数据模式追加一项
    506. 

  506. 	function appendItem1(){
    507. 

  507. 	   $("#sel-12-1").addItem({key: "新增项", value: "100"});
    508. 

  508. 	   $("#sel-12-1").setValue("100");
    509. 

  509. 	}
    510. 

  510. 	//json数据模式移除选择项
    511. 

  511. 	function removeItem1(){
    512. 

  512. 		$("#sel-12-1").removeItem("2");
    513. 

  513. 		 $("#sel-12-1").setValue("1");
    514. 

  514. 	}
    515. 

  515. 	
    516. 

  516. 	
    517. 

  517. 	//本地模式选择第二项
    518. 

  518. 	function selectSecondItem2(){
    519. 

  519. 	    $("#sel-12-2")[0].selectedIndex = 1;
    520. 

  520. 	    $("#sel-12-2").render();
    521. 

  521. 	}
    522. 

  522. 	//本地模式追加一项
    523. 

  523. 	function appendItem2(){
    524. 

  524. 	    //使用[0]是为了将JQuery对象转化为HTML对象
    525. 

  525. 	    var sel = $("#sel-12-2")[0];
    526. 

  526. 	    var length = sel.options.length;
    527. 

  527. 	    sel.options[length] = new Option("新增项" + length, length);
    528. 

  528. 	    $("#sel-12-2").val(length);
    529. 

  529. 	    $("#sel-12-2").render();
    530. 

  530. 	}
    531. 

  531. 	//本地模式移除选择项
    532. 

  532. 	function removeItem2(){
    533. 

  533. 		var sel = $("#sel-12-2")[0];
    534. 

  534. 		sel.remove(sel.selectedIndex);
    535. 

  535. 		 $("#sel-12-2").render();
    536. 

  536. 	}
    537. 

  537. 	
    538. 

  538. 	
    539. 

  539. 	
    540. 

  540. 	//表单重置
    541. 

  541. 	function resetForm(){
    542. 

  542. 	    $("#form-14")[0].reset();
    543. 

  543. 	    $("#form-14 select").resetValue(); 
    544. 

  544. 	}
    545. 

  545. 	
    546. 

  546. 	
    547. 

  547. 

  548. 

  549. </script>
    550. 

  550. 

  551. </body>
    552. 

  552. </html>
    553.