如何解决AngularJS中的MultiSelect相互依赖下拉列表
我想在javascript / jQuery / AngularJS中有一个多选的相互依赖下拉列表。假设数据来自数据库查询,则下拉列表已预先填充。
字段:
- Drop-down-1
- Drop-down-2
- Drop-down-3
- 提交按钮
如果我们选择下拉列表2,则其他两个下拉列表应根据下拉列表1进行更新,反之亦然。类似于图片中的Excel功能。
该怎么做?
angular.module('myApp',[])
.controller('MyController',MyController)
function MyController($scope) {
$scope.candidateSel = undefined;
$scope.selecetedCompany = undefined;
$scope.selecetdLoc = undefined;
$scope.listData = [{
"candidate_id": "1","candidate_name": "Name1","candidate_email": "amitsutar119@gmail.com","candidate_com": "Company1","candidate_loc": "com1_loc1","candidate_dep": "com1_loc1_dep1"
},{
"candidate_id": "3","candidate_name": "Name 3_title_1","candidate_email": "name3@gmail.com",{
"candidate_id": "5","candidate_name": "Smith","candidate_email": "smith@gmail.com","candidate_com": "Company2","candidate_loc": "com2_loc2","candidate_dep": "com2_loc2_dep1"
},{
"candidate_id": "6","candidate_dep": "com2_loc2_dep1"
}];
$scope.getInfo = function() {
if ($scope.candidateSel) {
$scope.company = [$scope.candidateSel['candidate_com']];
$scope.location = [$scope.candidateSel['candidate_loc']];
}
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div>
Names:
<select id="names" ng-model="candidateSel" ng-options="data.candidate_name for data in listData track by data.candidate_id" ng-change="getInfo()">
<option value=''>Select</option>
</select>
</div>
<div>
Company:
<select id="company" ng-disabled="!candidateSel" ng-model="selecetedCompany" ng-options="cancompany for cancompany in company">
<option value="">Select</option>
</select>
</div>
<div>
Location:
<select id="location" ng-disabled="!selecetedCompany" ng-model="selecetdLoc" ng-options="canloc for canloc in location">
<option value="">Select</option>
</select>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。