二级联动(jQuery实现)

最新推荐文章于 2024-05-31 10:47:24 发布

梵韵

最新推荐文章于 2024-05-31 10:47:24 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq_41673194/article/details/79767522

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1 引入angular包   shift+ctrl+/-->
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<style>
			ul li {
				background: deeppink;
			}
			
			tr:nth-child(2n+1) {
				background: gainsboro;
			}
			
			tr:nth-child(2n) {
				background: red;
			}
		</style>
		<script>
			/**/
			var app = angular.module("gaoynapp", []);
			/*contoller本质就是函数 */
			/*控制器:创建数据,定义行为函数来操纵数据 */
			app.controller("demo1", function($scope) {
				/* 给下拉列表框 ng-molde='sex'*/
				$scope.datas = [{
						name: '张三',
						sex: '男',
						birth: new Date('1995-04-24'),
						addres: '北京-西二旗'
					},
					{
						name: '李四',
						sex: '男',
						birth: new Date('1995-05-24'),
						addres: '北京-西二旗'
					},
					{
						name: '王三',
						sex: '男',
						birth: new Date('1995-04-24'),
						addres: '北京-西二旗'
					}
				];
				/*删除  i就是删除者调用的时候给的标记 */
				$scope.del = function(i) {
					var b = confirm("是否删除!");
					/*如果选中确定,执行删除 */
					if(b) {
						$scope.datas.splice(i, 1);
					}
				}
				/*添加的业务逻辑 */
				$scope.save = function() {
					var v_name = $scope.uname;
					var sex = $scope.sex;
					var birth = $scope.birth;
					var address = $scope.pro + "-" + $scope.citys;

					$scope.errors = []; /*存放错误信息的数组 */

					if(v_name == undefined || v_name.length < 3 || v_name.length > 30) {
						$scope.errors.push("用户名不合法");
					}
					if(sex == undefined) {
						$scope.errors.push("性别不能为空");
					}
					if($scope.errors.length == 0) {
						$scope.datas.push({
							name: v_name,
							sex: sex,
							birth: birth,
							addres: address
						});
					}
				}
				/* */
				$scope.qx = function() {
					var f = $scope.ld;
					for(var i in $scope.datas) {
						$scope.datas[i].ck = f;
					}
				}
				/*批量删除 */
				/*张三 李四  王三 */
				$scope.delAll = function() {
					for(var i = 0; i < $scope.datas.length; i++) {
						if($scope.datas[i].ck) {
							$scope.datas.splice(i, 1);
							i--;
						}
					}
				}
			})
		</script>
	</head>
	<!--1 创建空的$scope -->
	<body ng-app="gaoynapp" ng-controller="demo1">
		<button ng-click="delAll()">批量删除</button>
		<form>
			姓名:<input ng-model="uname" /> 性别:
			<select ng-init="sex='男'" ng-model="sex">
				<option>男</option>
				<option>女</option>
			</select>
			生日:<input type="date" ng-model="birth" /> 住址:
			<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
				<option value="">--请选择省份--</option>
				<option>北京</option>
				<option>河北</option>
				<option>河南</option>
			</select>
			城市：
			<select id="city" ng-model="citys" ng-init="citys='昌平'">
				<option value="">--请选择城市--</option>
				<option>海淀</option>
				<option>昌平</option>
			</select>
			<button ng-click="save()">保存</button>
		</form>
		<!-- 错误信息 -->
		<div>
			<ul>
				<li ng-repeat="e in errors">{{e}}</li>
			</ul>
		</div>
		<table border="1px">
			<tr>
				<td><input type="checkbox" ng-model="ld" ng-click="qx()" /></td>
				<td>姓名</td>
				<td>性别</td>
				<td>生日</td>
				<td>住址</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="n in datas">
				<td><input type="checkbox" ng-model="n.ck" /></td>
				<td>{{n.name}}</td>
				<td>{{n.sex}}</td>
				<td>{{n.birth|date:"yyyy-MM-dd日 hh:mm:ss"}}</td>
				<td>{{n.addres}}</td>
				<td><button ng-click="del($index)">删除</button></td>
			</tr>
		</table>
	</body>
	<!-- 通过jQuery代码实现二级联动 -->
	<script>
		/*数组 */
		var datas = [{
			pro: "北京",
			citys: ["海淀", "昌平"]
		}, {
			pro: "河北",
			citys: ["石家庄", "张家口"]
		}, {
			pro: "河南",
			citys: ["安阳", "濮阳"]
		}];

		function getcitys() {
			//把之前的城市数据清空
			$("#city option").remove();
			var datas_citys = []; //存放选择省份对应的城市
			//获取当前选择的省份
			var p = $("#pro").val(); /*p的值是下拉列表框选择的城市 */
			for(var i in datas) {
				if(datas[i].pro == p) {
					datas_citys = datas[i].citys;
					break; /*跳出循环，节省效率 */
				}
			}
			//根据datas_citys数组的内容
			/*2 把城市封装到option 把option添加到城市的select */
			for(var i in datas_citys) {
				var op = $("<option>" + datas_citys[i] + "</option>")
				$("#city").append(op);
			}
		}
	</script>
</html>

梵韵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
二级联动(jQuery实现)

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--1 引入angular包 shift+ctrl+/--&gt; &lt;script type="text/java
复制链接

扫一扫