您的位置：首页 > Web前端 > JQuery

二级联动（jquery）实现方法

2018-04-02 14:57 232 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.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>

<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" onchange="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>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航