二級聯動（jquery）實現方法
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1 引入angular包 shift+ctrl+/-->
<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>
<!--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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.