js：使用amaze select插件

使用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="width: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;width: 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="width:120px;">
            <!--<select name="cou" data-placeholder="" class="chosen-select-no-single" tabindex="9">-->
            <select ng-model="selectedItemsStr"  name="cou" id="str" style="height: 37px;width: 118px" tabindex="9">
                <option ng-repeat="item in strn" >{{item.strname}}</option>
            </select>
        </div>
    </div>
    <div class="selectionGroup">
        <div class="dropDown"  style="width:120px;">
            <!--<select name="str" data-placeholder="" class="chosen-select-no-single" tabindex="9">-->
            <select style="height: 37px;width: 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'     : {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>

 

posted @ 2018-01-24 22:52  dybe  阅读(281)  评论(0)    收藏  举报