angularJS-select级联

<div ng-init="districts=[

{code: '99', name: '省直', units: [

{code: '9901', name: '省单位1', positions: [

{code: '990101', name: '省职位1' },

{code: '990102', name: '省职位2' }

]},

{code: '9902', name: '省单位2', positions: [

{code: '990201', name: '省职位3' },

{code: '990202', name: '省职位4' }

]}

]},

{code: '01', name: '长沙', units: [

{code: '0101', name: '长沙单位1', positions: [

{code: '010101', name: '长沙职位1' },

{code: '010102', name: '长沙职位2' }

]},

{code: '0201', name: '长沙单位2', positions: [

{code: '010201', name: '长沙职位3' },

{code: '010202', name: '长沙职位4' }

]}

]}]" >

<select ng-model="selectedDistrict" ng-change="selectedUnit=''" ng-options="district.name for district in districts" >

<option value="">---请选择考区---</option>

</select>

<select ng-model="selectedUnit" ng-change="selectedPosition=''" ng-options="unit.name for unit in selectedDistrict.units">

<option value="">---请选择单位---</option>

</select>

<select ng-model="selectedPosition" ng-options="unit.name for unit in selectedUnit.positions">

<option value="">---请选择职位---</option>

</select>

</div>

这个应该不是很难

你可以通过<select>的onchange事件，提交表单，

在页面调用查询方法，给这个方法传参数就可以了，这样就可以改变，cityList,countryList....的值

也就获得了你要的效果，你也可以用ajax,其实原理是一样的

都是提交了表单，再调用查询方法，不同的是前一种，只要一个传参方法，

后者，要把获得的List显示在<select>中

1.可以动态添加多个下拉框,可减少下拉框

2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。

第一个下拉选项显示

选择下拉项，同时加载数据到第三个下拉框

注：在这里直接去掉了第二行的标签

为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字

---