区域联动自定义div实现select标签的选择效果

因项目对区域的样式有要求，而select标签的option不能自定义，故通过div实现select标签的选择效果。

说明如下：

1.实现点击文字框和⌵区域框出现，点击其他地方区域框关闭，通过在该页面的最大级div(非body)上增加点击事件实现：ng-click="areaHide($event)";
2.为实现整个框都可以点击，增加$event.stopPropagation()，阻止冒泡；
3.项目中区域共3种关系，本案例选择网公司账号演示；
4.SearchArea控制区域框的出现，showCity控制省、市出现，allQuery控制全部，因省级全部体现在数据库，故不用单独控制。

html：

<div class="service-list" ng-click="areaHide($event);">
    <div class="commonBg common-tab-height marginB20">
        <div class="col-xs-8">
            区域：
            <div class="pend-width pull-relative commonAreaDiv" ng-click="choose();$event.stopPropagation();">
                <span ng-show="pendReqInfo.cityName==null || (pendReqInfo.cityName==null && pendReqInfo.province=='nw')">{{pendReqInfo.provinceName}}</span>
                <span ng-show="pendReqInfo.cityName!=null && pendReqInfo.province!='nw'">{{pendReqInfo.cityName}}</span>

                <!--区域弹窗-->
                <div class="commonSearchArea" ng-if="SearchArea" ng-class="{'searchArea-width':!showCity,'searchArea-width2':showCity}">
                    <div class="no-padding first-area" ng-class="{'col-xs-6':showCity,'col-xs-12':!showCity}">
                        <div class="pend-menu">
                            <!--<p value="0" ng-class="{'bg-gray2 home-radius':allQuery2}" ng-click="changeProvince(0)" ng-show="showAll">全部</p>-->
                            <p ng-class="{'bg-gray2 home-radius':p.name==pendReqInfo.provinceName}" ng-click="changeProvince(p);$event.stopPropagation();" ng-repeat="p in provinces" ng-model="pendReqInfo.province">{{p.name}}</p>
                        </div>
                    </div>
                    <div class="col-xs-6 no-padding first-area" ng-show="showCity">
                        <div class="pend-menu">
                            <p value="1" ng-class="{'bg-gray2 home-radius':allQuery}" ng-click="changeCity(1);$event.stopPropagation();" ng-show="showAll">全部</p>
                            <p ng-class="{'bg-gray2 home-radius':c.code==pendReqInfo.cities}" ng-click="changeCity(c);$event.stopPropagation();" ng-repeat="c in cities" ng-model="pendReqInfo.cities">{{c.name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

js

$scope.pendReqInfo = {};
$scope.SearchArea = false;
$scope.areaHide = function ($event) {
    if(!$($event.target).is('div.commonAreaDiv') && !$($event.target).is('div.pend-menu')){
        if($scope.SearchArea){
            $scope.SearchArea = false;
        }
    }
}
$scope.choose = function (val) {
    if($scope.SearchArea){
         $scope.SearchArea = false;
    }else{
         $scope.SearchArea = true;
    }
}

//地区
$scope.provinces = [];
$scope.cities = [];
$scope.showCity = false;
$scope.showAll = false;
$scope.allQuery = false;

SyspropertyService.getGroupData({type:'4'},function(responseData){
    if(responseData.status == '00'){
        $scope.showAll = true;
        $scope.showAll2 = true;
        $scope.provinces = responseData.data;
        for(var i = 0; i < $scope.provinces.length; i++){
            if($scope.provinces[i].level == '1'){
                $scope.provinces[i].name = "全部";
            }
        }
        $scope.pendReqInfo.province = $scope.provinces[0].code;
        $scope.pendReqInfo.provinceName = $scope.provinces[0].name;
    }
});


$scope.changeProvince = function(p) {
    if(checkNull(p)){
        return;
    }
    $scope.pendReqInfo.province = p.code;
    $scope.pendReqInfo.provinceName = p.name;
    $scope.pendReqInfo.cities = null;
    $scope.pendReqInfo.cityName = null;
    SyspropertyService.getGroupData({type:'3',parentCode:$scope.pendReqInfo.province},function(responseData){
        if(responseData.status == '00'){
            $scope.cities = responseData.data;
            $scope.showCity = true;
            $scope.allQuery = true;
        }
    })
}
$scope.changeCity = function (c) {
    if(checkNull(c)){
        return;
    }
    if(c==1){
        $scope.allQuery = true;
        // $scope.allQuery2 = true;
    }else{
        $scope.allQuery = false;
        // $scope.allQuery2 = false;
    }
    $scope.pendReqInfo.cities = c.code;
    $scope.pendReqInfo.cityName = c.name;
    $scope.SearchArea = false;
}

 css

/*区域及类似选择框*/
.commonAreaDiv{
    display: inline-block;
    color: #A1A1A1;
    padding: 6px 12px;
    margin-bottom: 0;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    border: 1px solid #D7D7D7;
    height: 32px;
}
.commonAreaDiv:before{
    content: '⌵';
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 18px;
    color: #D7D7D7;
    font-weight:bold;
}
.commonSearchArea{
    position: absolute;
    top: 31px;
    left: -1px;
    height: 140px;
    z-index: 1000;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #ffffff;
}

数据结构示意如下：

$scope.provinces = [
    {
        areaName: null,
        cityCode: null,
        code: "gd",
        id: "gd030000000000002",
        level: "2",
        name: "广东",
        parentId: "-1",
        powerCode: null,
        provinceCode: null,
    },
];
$scope.cities = [
    {
        areaName: null,
        cityCode: "0302",
        code: "0302",
        id: "gd030200000000083",
        level: "3",
        name: "韶关",
        parentId: "gd030000000000002",
        powerCode: null,
        provinceCode: "gd",
    },
];

区域联动效果如下：

注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢