本文实例为大家分享了angularjs实现多级下拉框的具体代码，供大家参考，具体内容如下

div ng-app="multidropdownapp" ng-controller="multidropdowncontrol as vm">
    
  label>
    选择地址:/label>
    
  !--ng-options加载所有选择项，ng-model记录当前选择项-->
    
  select ng-model="vm.province" ng-options="x.name for x in vm.provincesort"
      ng-change="vm.selectprovince()" id="" value="" class="form-control width-25">
    
    option value="">
    请选择/option>
    

  /select>
    
  label>
    —/label>
    
  select ng-model="vm.city" ng-options="x.name for x in vm.citysort"
      id="" value="" class="form-control width-25">
    
    option value="">
    请选择/option>
    

  /select>
    
/div>
    

script src="~/scripts/angular.min.js">
    /script>
    
script>
    
  var app = angular.module('multidropdownapp', []);

  //可以添加上自己注入的服务
  app.controller('multidropdowncontrol', ['$scope', '$http',
    function ($scope, $http) {
    
      var vm = this;
    
      vm.provincesort = [];
    
      vm.citysort = [];


      //选择省级单位，初始化市级数据  二级联动
      vm.selectprovince = function () {
    
        var fatherid = vm.province.id;
    
        vm.citysort = [];

        $http({

          method: 'post',
          url: '/angularjsstudy/getchildrensort',
          data: {
 fatherid: fatherid }

        }
).then(function successcallback(data) {
    
          vm.citysort = data.data;

        }
, function errorcallback(response) {

          // 请求失败执行代码
        }
    );

      }


      //初始化页面
      function init() {

        //省
        $http({

          method: 'post',
          url: '/angularjsstudy/getprovincesort',
          data: {
}

        }
).then(function successcallback(data) {
    
          //加载下拉框数据
          vm.provincesort = data.data;
    
          //设置默认选项
          vm.province = vm.provincesort[0];

        }
, function errorcallback(response) {

          // 请求失败执行代码
        }
    );

      }
    

      //初始化
      init();

    }
    ])
/script>

controller

public actionresult getprovincesort()
    {
    
      listdistrict>
     districts = new listdistrict>
    ();

      districts.add(new district() {
id=1,fatherid=0,name="湖南省" }
    );

      districts.add(new district() {
 id =2, fatherid = 0, name = "湖北省" }
    );

      districts.add(new district() {
 id =3, fatherid = 0, name = "四川省" }
    );
    
      return json(districts);

    }


    public actionresult getchildrensort(int fatherid)
    {
    
      listdistrict>
     districts = new listdistrict>
    ();

      switch (fatherid)
      {

        case 1:
          districts.add(new district() {
 id = 4, fatherid = 1, name = "长沙市" }
    );

          districts.add(new district() {
 id = 5, fatherid = 1, name = "岳阳市" }
    );

          districts.add(new district() {
 id = 6, fatherid = 1, name = "株洲市" }
    );
    
          return json(districts);

        case 2:
          districts.add(new district() {
 id = 7, fatherid = 2, name = "武汉市" }
    );

          districts.add(new district() {
 id = 8, fatherid = 2, name = "宜昌市" }
    );
    
          return json(districts);

        case 3:
          districts.add(new district() {
 id = 9, fatherid = 3, name = "成都市" }
    );

          districts.add(new district() {
 id = 10, fatherid = 3, name = "遂宁市" }
    );

          districts.add(new district() {
 id = 11, fatherid = 3, name = "巴中市" }
    );

          districts.add(new district() {
 id = 12, fatherid = 3, name = "绵阳市" }
    );

          districts.add(new district() {
 id = 13, fatherid = 3, name = "南充市" }
    );
    
          return json(districts);

        default:
          districts.add(new district() {
 id = 14, fatherid = -1, name = "不知道你选了什么∑q|ﾟдﾟ|p" }
    );
    
          return json(districts);

      }

    }

model

public class district
{

  public int id {
     get;
     set;
 }
    
  /// summary>
    
  /// 根节点fatherid=0
  /// /summary>

  public int fatherid {
     get;
     set;
 }

  public string name {
     get;
     set;
 }

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！