JS制作二级联动

  1. 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. 	<html xmlns="http://www.w3.org/1999/xhtml">
  4. 	<head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. 	<title>设置</title>
  7. 	<style>
  8. 		.div {
  9. 			-webkit-box-sizing: border-box;
  10. 			-moz-box-sizing: border-box;
  11. 			box-sizing: border-box;
  12. 			font-size: 18px;
  13. 			border: 1px solid #e1e1e1;
  14. 			box-shadow: none;
  15. 			width: 100%;
  16. 			height: 36px;
  17. 			padding: 4px 6px;
  18. 			font-size: 14px;
  19. 			line-height: 20px;
  20. 			color: #555;
  21. 			-webkit-border-radius: 4px;
  22. 			-moz-border-radius: 4px;
  23. 			border-radius: 4px;
  24. 			vertical-align: middle;
  25. 		}
  27. 		select {
  28. 			border: none;
  29. 			/*清除select的边框样式*/
  30. 			outline: none;
  31. 			/*清除select聚焦时候的边框颜色*/
  32. 			width: 20%;
  33. 			/* 将select的宽高等于div的宽高*/
  34. 			height: 30px;
  35. 			line-height: 30px;
  36. 			//隐藏select的下拉图标
  37. 			appearance: none;
  38. 			-webkit-appearance: none;
  39. 			-moz-appearance: none;
  40. 			/*//通过padding-left的值让文字居中*/
  41. 			padding-left: 60px;
  42. 		}
  44. 		//使用伪类给select添加自己想用的图标
  45. 		div:after {
  46. 			content: "";
  47. 			width: 14px;
  48. 			height: 8px;
  49. 			background: url(img/xiala.png) no-repeat center;
  50. 			//通过定位将图标放在合适的位置
  51. 			position: absolute;
  52. 			right: 20px;
  53. 			top: 45%;
  54. 			//给自定义的图标实现点击下来功能
  55. 			pointer-events: none;
  56. 		}
  57. 	</style>
  59. 	<link href="css/demo.css" rel="stylesheet" type="text/css">
  60. 	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  61. 	<!--Framework-->
  62. 	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  63. 	<script src="js/jquery-ui.js" type="text/javascript"></script>
  64. 	<!--End Framework-->
  65. 	<script src="js/jquery.ffform.js" type="text/javascript"></script>
  66. 	<script src="js/setting_ajax.js" type="text/javascript"></script>
  67. 	<script type="text/javascript">
  68. 		function setting_click() {
  69. 			//alert("点击");
  70. 			var province = $("#province").val(); //收件人邮箱名
  71. 			var city = $("#city").val(); //收件人传输协议,数值
  72. 			var province2 = $("#province2").val(); //发件人邮箱名
  73. 			var city2 = $("#city2").val(); //发件人传输协议,数值
  75. 			var name = $("#name").val(); //发件人昵称
  76. 			var email = $("#email").val(); //收件人邮箱
  78. 			var email_port; //端口
  79. 			var email_agreement; //协议
  81. 			var d = parseInt(city);
  82. 			switch(d) {
  83. 				case 0:
  84. 					email_agreement = "pop3.sohu.com";
  85. 					email_port = "110";
  86. 					break;
  87. 				case 1:
  88. 					email_agreement = "pop.126.com";
  89. 					email_port = "110";
  90. 					break;
  91. 				case 2:
  92. 					email_agreement = "POP.139.com";
  93. 					email_port = "110";
  94. 					break;
  95. 				case 3:
  96. 					email_agreement = "pop.163.com";
  97. 					email_port = "110";
  98. 					break;
  99. 				case 4:
  100. 					email_agreement = "pop.qq.com";
  101. 					email_port = "110";
  102. 					break;
  103. 				case 5:
  104. 					email_agreement = "pop.exmail.qq.com";
  105. 					email_port = "995";
  106. 					break;
  107. 				case 6:
  108. 					email_agreement = "POP.foxmail.com";
  109. 					email_port = "110";
  110. 					break;
  111. 				case 7:
  112. 					email_agreement = "pop.china.com";
  113. 					email_port = "110";
  114. 					break;
  115. 				case 8:
  116. 					email_agreement = "pop.mail.yahoo.com";
  117. 					email_port = "995";
  118. 					break;
  119. 				case 9:
  120. 					email_agreement = "pop.mail.yahoo.com.cn";
  121. 					email_port = "995";
  122. 					break;
  123. 			}
  124. 			alert("收件人：_邮箱名称 ：  "+province+"_传输协议："+email_agreement+"_端口："+email_port);
  126. 			var email_port2; //端口
  127. 			var email_agreement2; //协议
  129. 			var d2 = parseInt(city2);
  131. 			switch(d2) {
  132. 				case 0:
  133. 					email_agreement2 = "smtp.sohu.com";
  134. 					email_port2 = "25";
  135. 					break;
  136. 				case 1:
  137. 					email_agreement2 = "smtp.126.com";
  138. 					email_port2 = "25";
  139. 					break;
  140. 				case 2:
  141. 					email_agreement2 = "smtp.139.com";
  142. 					email_port2 = "25";
  143. 					break;
  144. 				case 3:
  145. 					email_agreement2 = "smtp.163.com";
  146. 					email_port2 = "25";
  147. 					break;
  148. 				case 4:
  149. 					email_agreement2 = "smtp.qq.com";
  150. 					email_port2 = "25";
  151. 					break;
  152. 				case 5:
  153. 					email_agreement2 = "smtp.exmail.qq.com";
  154. 					email_port2 = "587"; //（SSL启用 端口：587/465）
  155. 					break;
  156. 				case 6:
  157. 					email_agreement2 = "smtp.foxmail.com";
  158. 					email_port2 = "25";
  159. 					break;
  160. 				case 7:
  161. 					email_agreement2 = "smtp.china.com";
  162. 					email_port2 = "25";
  163. 					break;
  164. 				case 8:
  165. 					email_agreement2 = "smtp.mail.yahoo.com";
  166. 					email_port2 = "587";
  167. 					break;
  168. 				case 9:
  169. 					email_agreement2 = "smtp.mail.yahoo.com.cn";
  170. 					email_port2 = "587";
  171. 					break;
  172. 			}
  173. 			alert("发件人：_邮箱名称 ：  "+province2+"_传输协议："+email_agreement2+"_端口："+email_port2);
  175. 			/* ajax请求 */
  176. 			$.ajax({
  177. 				url: "",
  178. 				type: "post",
  179. 				data: {
  180. 					"email_name": province, //收件人邮箱名
  181. 					"email_agreement": email_agreement, //收件人协议
  182. 					"email_port": email_port, //端口
  184. 					"email_name2": province2, //发件人邮箱名
  185. 					"email_agreement2": email_agreement2, //发件人协议
  186. 					"email_port2": email_port2, //端口
  188. 					"name": name, //发件人昵称
  189. 					"email": email //收件人邮箱
  190. 				},
  191. 				dataType: "json",
  192. 				success: function(data) {
  193. 					console.log(data);
  194. 					if(data == 1) {
  195. 						alert("提交成功！");
  196. 					}
  197. 				}
  198. 			});
  200. 		}
  201. 	</script>
  202. 	<script type="text/javascript">
  203. 		$(document).ready(function() {
  204. 			$('#form').ffform({
  205. 				animation: 'flip',
  206. 				submitButton: '#submit',
  207. 				validationIndicator: '#validation',
  208. 				errorIndicator: '#error',
  209. 				successIndicator: '#success',
  210. 				'fields': [{
  211. 					'id': 'name',
  212. 					required: true,
  213. 					requiredMsg: 'Name is required',
  214. 					type: 'alpha',
  215. 					validate: true,
  216. 					msg: 'Invalid Name'
  217. 				}, {
  218. 					'id': 'email',
  219. 					required: true,
  220. 					requiredMsg: 'E-Mail is required',
  221. 					type: 'email',
  222. 					validate: true,
  223. 					msg: 'Invalid E-Mail Address'
  224. 				}, {
  225. 					'id': 'phone',
  226. 					required: false,
  227. 					type: 'custom',
  228. 					validate: false,
  229. 					msg: 'Invalid Phone #'
  230. 				}, {
  231. 					'id': 'message',
  232. 					required: false,
  233. 					type: 'text',
  234. 					validate: false,
  235. 					msg: ''
  236. 				}]
  237. 			});
  238. 		});
  239. 	</script>
  240. </head>
  242. <body style="">
  243. 	<center>
  244. 		<div style="margin:0 auto;padding: 30px;">
  245. 			<form name="form1" method="post" action="" style="width: 100%;">
  246. 				收件人：
  247. 				<select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select>
  248. 				协议：
  249. 				<select name="city" id="city"></select>
  251. 				发件人：
  252. 				<select name="province2" id="province2" onchange="changeSelect2(this.selectedIndex)"></select>
  253. 				协议：
  254. 				<select name="city2" id="city2"></select>
  255. 			</form>
  256. 		</div>
  257. 	</center>
  258. 	<section id="getintouch" class="bounceIn animated">
  259. 		<div class="container" style="border-bottom: 0;">
  260. 			<h1>
  261.             <span>请输入</span>
  262.         </h1>
  263. 		</div>
  264. 		<div class="container">
  265. 			<form class="contact" action="#" method="post" id="form">
  266. 				<div class="row clearfix">
  267. 					<div class="lbl">
  268. 						<label for="name">
  269.                     	发件人昵称	</label>
  270. 					</div>
  271. 					<div class="ctrl">
  272. 						<input type="text" id="name" name="name" data-required="true" data-validation="text" data-msg="Invalid Name" placeholder="Ex:昵称">
  273. 					</div>
  274. 				</div>
  275. 				<div class="row clearfix">
  276. 					<div class="lbl">
  277. 						<label for="email">
  278.                     	收件人邮箱</label>
  279. 					</div>
  280. 					<div class="ctrl">
  281. 						<input type="text" id="email" name="email" data-required="true" data-validation="email" data-msg="Invalid E-Mail" placeholder="Ex:邮箱的地址">
  282. 					</div>
  283. 				</div>
  284. 				<div class="row  clearfix">
  285. 					<div class="span10 offset2">
  286. 						<input type="button" name="setting_button" id="setting_button" class="submit" value="Send Message" onclick="setting_click()">
  287. 					</div>
  288. 				</div>
  289. 			</form>
  290. 			<div id="success">
  291. 				Your E-Mail has been sent successfully!</div>
  292. 			<div id="error">
  293. 				Unable to send e-mail at the moment, please try later.</div>
  294. 			<div id="validation">
  295. 			</div>
  296. 		</div>
  297. 	</section>
  298. 	<script type="text/javascript">
  299. 		var arr_province = ["邮箱名称",
  300. 			"搜狐邮箱",
  301. 			"126邮箱",
  302. 			"139邮箱",
  303. 			"163邮箱",
  304. 			"QQ邮箱",
  305. 			"QQ企业邮箱",
  306. 			"Foxmail",
  307. 			"china.com",
  308. 			"yahoo.com",
  309. 			"yahoo.com.cn",
  311. 		];
  313. 		var arr_city = [
  314. 			["传输协议"],
  315. 			["pop3.sohu.com"],
  316. 			['pop.126.com'],
  317. 			["POP.139.com"],
  318. 			['pop.163.com'],
  319. 			["pop.qq.com"],
  320. 			['pop.exmail.qq.com'],
  321. 			["POP.foxmail.com"],
  322. 			['pop.china.com'],
  323. 			["pop.mail.yahoo.com"],
  324. 			['pop.mail.yahoo.com.cn']
  325. 		];
  327. 		var arr_province2 = ["邮箱名称",
  328. 			"搜狐邮箱",
  329. 			"126邮箱",
  330. 			"139邮箱",
  331. 			"163邮箱",
  332. 			"QQ邮箱",
  333. 			"QQ企业邮箱",
  334. 			"Foxmail",
  335. 			"china.com",
  336. 			"yahoo.com",
  337. 			"yahoo.com.cn",
  339. 		];
  341. 		var arr_city2 = [
  342. 			["传输协议"],
  343. 			["smtp.sohu.com"],
  344. 			['smtp.126.com'],
  345. 			["smtp.139.com"],
  346. 			['smtp.163.com'],
  347. 			["smtp.qq.com"],
  348. 			['smtp.exmail.qq.com'],
  349. 			["SMTP.foxmail.com"],
  350. 			['smtp.china.com'],
  351. 			["smtp.mail.yahoo.com"],
  352. 			['smtp.mail.yahoo.com.cn']
  353. 		];
  355. 		//网页加载完成，初始化菜单
  356. 		window.onload = init; //传入函数地址
  357. 		function init() {
  358. 			//首先获取对象
  359. 			var province = document.form1.province;
  360. 			var city = document.form1.city;
  361. 			var province2 = document.form1.province2;
  362. 			var city2 = document.form1.city2;
  364. 			//指定省份中<option>标记的个数
  365. 			province.length = arr_province.length;
  366. 			province2.length = arr_province2.length;
  367. 			//循环将数组中的数据写入<option>标记中
  368. 			for(var i = 0; i < arr_province.length; i++) {
  369. 				province.options[i].text = arr_province[i];
  370. 				province.options[i].value = arr_province[i];
  371. 				//province.options[i].value = i;
  372. 				province2.options[i].text = arr_province2[i];
  373. 				province2.options[i].value = arr_province2[i];
  374. 			}
  376. 			//修改省份列表的默认选择项
  377. 			var index = 0;
  378. 			province.selectedIndex = index;
  379. 			province2.selectedIndex = index;
  380. 			//指定城市中<option>标记的个数
  381. 			city.length = arr_city[index].length;
  382. 			city2.length = arr_city2[index].length;
  383. 			//循环将数组中的数据写入<option>标记中
  384. 			for(var j = 0; j < arr_city[index].length; j++) {
  385. 				city.options[j].text = arr_city[index][j];
  386. 				city.options[j].value = arr_city[index][j];
  387. 				city2.options[j].text = arr_city2[index][j];
  388. 				city2.options[j].value = arr_city2[index][j];
  389. 			}
  390. 		}
  392. 		function changeSelect(index) {
  393. 			//选择对象
  394. 			var city = document.form1.city;
  395. 			//修改省份列表的选择项
  396. 			province.selectedIndex = index;
  398. 			//指定城市中<option>标记的个数
  399. 			city.length = arr_city[index].length;
  401. 			//循环将数组中的数据写入<option>标记中
  402. 			for(var j = 0; j < arr_city[index].length; j++) {
  403. 				city.options[j].text = arr_city[index][j];
  404. 				//city.options[j].value = arr_city[index][j];
  405. 				city.options[j].value = j;
  406. 			}
  407. 		}
  409. 		function changeSelect2(index) {
  410. 			//选择对象
  411. 			var city = document.form1.city2;
  412. 			//修改省份列表的选择项
  413. 			province2.selectedIndex = index;
  415. 			//指定城市中<option>标记的个数
  416. 			city2.length = arr_city[index].length;
  418. 			//循环将数组中的数据写入<option>标记中
  419. 			for(var j = 0; j < arr_city[index].length; j++) {
  420. 				city2.options[j].text = arr_city[index][j];
  421. 				//city2.options[j].value = arr_city[index][j];
  422. 				city2.options[j].value = j;
  423. 			}
  424. 		}
  425. 	</script>
  426. </body>
  428. </html>

JS制作二级联动的更多相关文章

  1. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  2. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  3. 原生js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  4. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. js 实现二级联动

    onchange 事件 <body> <select id="province" onchange="func1()"> <opt ...

  6. js省市二级联动

    html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...

  7. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  8. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  9. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. java String 类特点

    String的设计是一个典型的单一模式 String str1="AAAA":String str2="AAAA": 这生成两个对象吗?不是.在内存中,这是同一 ...

  2. C# DotNetZip压缩单、多文件以及文件夹

    有些项目为了更好的用户体验,会把下载文件做成一个压缩的文件,直接下载,免得去一个个的点击下载文件.网上有很多压缩文件的方法,也有第三方的分装DLL文件,本文主要介绍DotNetZip压缩方法. Dot ...

  3. Python笔记(六)_函数

    函数一般是从第一行代码开始执行,结束于return语句.异常.或者函数所有语句执行完毕.一旦函数将控制权交还给调用者,就意味着全部结束.函数中做的所有工作以及保存在局部变量中的数据都将丢失.再次调用这 ...

  4. 哈希算法和字典类的定义，DataSet中数据遍历的几种方法

    哈希算法的基本操作: 1.  哈希表(HashTable)简述   在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似 ...

  5. Java程序的设计环境配置

    一.下载主要的开发工具 JDK的下载 www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Ecli ...

  6. Mybatis的分支选择和In循环

    Mybatis的分支选择: <choose> <when test="patientNo != null and patientNo != ''"> and ...

  7. docker--container的port映射

    使用nginx为例 先运行nginx [root@localhost ~]# docker run --name web -d nginx Unable to find image 'nginx:la ...

  8. [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...

  9. h5py库

    参考文献:http://docs.h5py.org/en/latest/high/dataset.html h5py文件存放数据集(dataset)和组(group). dataset类似数组类的数据 ...

  10. 用List和Map排序输出

    参考:java的treemap反序输出 int->string string->int java对象数组的概述 List import java.io.*; import java.uti ...