个人中心
gpt4 book ai didi

javascript - 下拉菜单绑定(bind)并从剩余下拉菜单中删除选项

转载 作者：太空宇宙 更新时间：2023-11-04 15:42:23 26 4
gpt4 key购买 nike

我有 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/

26 4 0
文章推荐： css - 动态改变div标签的内容
文章推荐： c++ - 我应该什么时候返回 std::ostream？
文章推荐： jquery - 将不同的图像更改/裁剪为动态调整大小(根据浏览器的)div
文章推荐： html - Django 表单实践
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com