How to remove all values from dropdown except one which is selected from another dropdown

Question

I have three dropdowns:-

    <select clas="col-md-3" ng-model="a.userList" ng-change="selectValues(a.userList)">
        <option>AX</option>
        <option>AF</option>
        <option>AM</option>
        <option>BX</option>
        <option>BF</option>
        <option>BM</option>
        <option>CX</option>
        <option>CF</option>
        <option>CM</option>
        <option>DX</option>
        <option>DF</option>
        <option>DM</option>
</select>
<select clas="col-md-3" ng-model="a.userCode">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
</select>
<select clas="col-md-3" ng-model="a.userId">
        <option>X</option>
        <option>F</option>
        <option>M</option>
</select>

what I want is when user select AX then from other two dropdowns A and X got selected respectively and all the other values got removed from that two dropdowns.

My directive Code:-

               scope.selectValues = function(userList){
                    switch(userList){
                        case "AX" : scope.a.userCode = "A";
                                    scope.a.userId = "X";
                                    break;
                        case "AF" : scope.a.userCode = "A";
                                    scope.a.userId = "F";
                                    break;
                        case "AM" : scope.a.userCode = "A";
                                    scope.a.userId = "M";
                                    break;
                    };

                };

On the above code I am able to select the particular value which I want to select but not able to remove all the other values from the two dropdowns. Can anyone tell me how to remove the values from dropdowns.

have tried basic things like $('#selectId').find('option[value!="'+removeItemVal+'"]').remove(); — Mujthaba Ibrahim
– Mujthaba Ibrahim, Commented Jul 1, 2017 at 15:22
I'am not good in angularjs. if you put a code like that and it is working, then you need to add it for every case — Mujthaba Ibrahim
– Mujthaba Ibrahim, Commented Jul 1, 2017 at 16:47
actually the cod is not working, I think there is some angularJs/jquery error. — shreya gupta
– shreya gupta, Commented Jul 1, 2017 at 17:05

Frank Cadillac · Accepted Answer · 2017-07-01 15:27:29Z

1

You should put your options in the scope!

JS

scope.userList = ["AX","AF", "AM", "BX", "BF"];
//Obviously put all of your options in this array also for the other selects
scope.userCode = [....];
scope.userId = [....];

HTML

ng-options is what you need

 <select class="col-md-3" ng-model="a.userList"
     ng-options="option for option in topUserList track by $index"
     ng-change="selectValues(a.userList)"></select>

JS

 scope.selectValues = function(userList){
        scope.a.userCode = userList.charAt(0);
        scope.a.userId = userList.charAt(1);
        scope.userCode = [scope.a.userCode];
        scope.userId = [scope.a.userId];

 };

answered Jul 1, 2017 at 15:27

Frank Cadillac

2451 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove all values from dropdown except one which is selected from another dropdown

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related