我有 3 个下拉菜单，并且这 3 个下拉菜单具有相同的选项。
选项前... kiran、viran、charan、narine。
如果我在第一个下拉列表中选择 kiran，则该下拉列表必须不会显示在其余下拉列表中(应仅显示 viran、charan、narine)。如果我在接下来的两个下拉菜单中选择 viran 。第三个下拉列表应仅显示 charan 和 narine。
我的 html 中有 3 个范围变量，用于 3 个下拉列表。你可以看到下面请帮助我。
这是我的 Html，我为此使用 Angular Js:
<html>
<body>
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Primary Physician</option>
</select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Secondary Physician</option>
</select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option>
</select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>
</html>
<script>
$scope.createOrUpdateResidentProvider = function () {
blockUI.start();
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
residentService.post($scope.constants.API.CREATE_NEW_RESIDENT_PROVIDER, $scope.residentprovider).then(
function (response) {
toaster.pop('success', response.message);
blockUI.stop();
},
function (response) {
toaster.pop('error', response.message);
blockUI.stop();
})
}
</script>
最佳答案
使用禁用时... ng-options="item.ServiceProviderID as item.personbase.FullName 禁用当residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders"
var app = angular.module('myApp',[]);
app.controller('appCtrl', function($scope){
$scope.serviceProviders =[{"ServiceProviderID":1,personbase:{"FullName":"AAA"}},{"ServiceProviderID":2,personbase:{"FullName":"BBB"}},{"ServiceProviderID":3,personbase:{"FullName":"CCC"}}];
$scope.createOrUpdateResidentProvider = function () {
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="appCtrl">
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Primary Physician</option></select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Secondary Physician</option></select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID || residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option></select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<br>{{residentprovider.pPhysician}}
{{residentprovider.sPhysician}} {{residentprovider.aPhysician}}<br>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>关于javascript - 下拉菜单绑定(bind)并从剩余下拉菜单中删除选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43775656/