使用amaze select插件配合angular http完成下拉选择地区的功能
使用的json格式
{"pro":[
{
"proid":"2",
"proname":"H市",
"proargs":[
{"strid":"1","strname":"1区","strargs":[
{"couid":"1","couname":"a街"},
{"couid":"2","couname":"q路"}]},
{"strid":"2","strname":"2区","strargs":[
{"couid":"1","couname":"e镇"},
{"couid":"2","couname":"r镇"}]},
{"strid":"3","strname":"3区","strargs":[
{"couid":"1","couname":"t路"},
{"couid":"2","couname":"y街"}]}
]
}
]}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="themes/default.css" />
<link type="text/css" rel="stylesheet" href="javascript/chosen/chosen.min.css" />
<script src="angular-1.6.5/angular.js"></script>
<script type="text/javascript" src="javascript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="javascript/chosen/chosen.jquery.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mycrl" >
<div class="selectionGroup">
<div class="dropDown" style="120px;">
<!--<select data-placeholder="所在州" class="chosen-select-no-single" ng-click="getpro()" tabindex="9" ng-model="selectedItems" ng-change="chapro(selectedItems)">-->
<select name="pro" id="pro" class="" style="height: 37px; 118px" tabindex="9" ng-model="selectedItems" >
<option ng-repeat="item in pron">{{item.proname}}</option>
</select>
</div>
</div>
<div class="selectionGroup">
<div class="dropDown" style="120px;">
<!--<select name="cou" data-placeholder="" class="chosen-select-no-single" tabindex="9">-->
<select ng-model="selectedItemsStr" name="cou" id="str" style="height: 37px; 118px" tabindex="9">
<option ng-repeat="item in strn" >{{item.strname}}</option>
</select>
</div>
</div>
<div class="selectionGroup">
<div class="dropDown" style="120px;">
<!--<select name="str" data-placeholder="" class="chosen-select-no-single" tabindex="9">-->
<select style="height: 37px; 118px" ng-model="selectedItemsCou" id="cou" name="str" tabindex="9">
<option ng-repeat="item in coun">{{item.couname}}</option>
</select>
</div>
</div>
</div>
<script language="JavaScript">
var app = angular.module('myapp', []);
app.controller('mycrl', function($scope,$http) {
//$scope.pron=[{id:1,name:'成都市'},{id:2,name:'彭州市'},{id:3,name:'德阳市'}];
var pron;
var st;
$http({
//使用http方法获取json数据
method: 'GET',
url: 'site.json'
}).then(function successCallback(response) {
//使用ng-model初始化select中的参数
$scope.pron = response.data.pro;
pron = response.data.pro;
st=pron[0].proargs;
$scope.selectedItems=$scope.pron[0].proname;
$scope.strn=pron[0].proargs;
$scope.selectedItemsStr=$scope.strn[0].strname;
$scope.coun=$scope.strn[0].strargs;
$scope.selectedItemsCou=$scope.coun[0].couname;
}, function errorCallback(response) {
});
//需要一点延迟，等angular初始化完，再配置插件
setTimeout(function(){
$('#pro').addClass("chosen-select-no-single");
$('#str').addClass("chosen-select-no-single");
$('#cou').addClass("chosen-select-no-single");
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {"100%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
$('.chosen-select').chosen();
$('#pro').chosen().change(function(arg,obj){
obj=obj.selected;
pron.forEach(function(val,i,pron) {
if(obj==pron[i].proname){
console.log(pron[i].proname);
st=pron[i].proargs;
chapro(pron[i].proargs)
}
});
});
$('#str').chosen().change(function(arg,obj){
st.forEach(function(val,i,st){
if(obj.selected==st[i].strname){
chastr(st[i].strargs)
}
})
});
},100);
var cou=null;
$scope.getpro=function(){
};
var chapro=function(st){
//删除str下所有的子节点
$('#str').empty();
st.forEach(function(val,i,st){
cou=st[i].strargs;
//添加子节点
$('#str').append('<option>'+ st[i].strname +'</option>');
//插件方法刷新插件数据
$('#str').trigger('chosen:updated')
})
};
var chastr=function(cu){
$('#cou').empty();
cu.forEach(function(val,i,cu){
$('#cou').append('<option> '+ cu[i].couname +'</option>');
$('#cou').trigger('chosen:updated')
})
};
});
</script>
<!-- 插件属性说明
.chosen-select-no-single : {disable_search_threshold:10} option小于10项隐藏搜索框。
.chosen-select-deselect:{allow_single_deselect:true} 设置为 true 时非必选的单选框会显示清除选中项图标
.chosen-select-no-results: {no_results_text:'Oops, nothing found!'} 没有搜索到结果的时候显示的内容
-->
</body>
</html>