How to Enable second dropdown based on the selection of first dropdown using jquery

Haf
November 25, 2022
136 views
0 votes
2 Answers

I have created first dropdown which returns a bit. It is either Outbound or Inbound and based on that selection I need to enable the respective further Outbound or Inbound dropdown. It means one dropdown will remain disabled.

                <div class="form-group" id="type">
                    <label class="control-label col-md-2">@Localiser["Outbound"] / @Localiser["Inbound"]</label>
                    <div class="col-md-10">
                        <select id="outboundInboundType" name="outboundInboundType" asp-items="@await SelectLists.OutboundInboundTypes()" class="form-control"></select>
                    </div>
                </div>
```

Based on the selection of above code I need to open Either 'Outbound' dropdown shown below
```
                    <div class="form-group" id="claimOutbound">
                        <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.ClaimStatusTypes()"></select>
                            <span asp-validation-for="ClaimStatus" class="text-danger"/>
                        </div>
                    </div>
```

Or Inbound Dropdown below

```
                    <div class="form-group"  id="claimInbound">
                        <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.InboundClaimStatusTypes()"></select>
                            <span asp-validation-for="ClaimStatus" class="text-danger" />
                        </div>
                    </div>
```


I need to achieve this using Jquery, I have tried using the ajax call but it is not working

Tags: html jquery

Answers

You can try this code:

var boundType= function () {
    if ($("#outboundInboundType").find(":selected").val() == `your desired value`) {
        $("#claimOutbound > select").prop('disabled', false);
    }
    else {
        $("#claimOutbound > select").prop('disabled', true);
    }
  };
  $(boundType);
  $("#outboundInboundType").change(boundType);

Here is a working solution.

function showAproprateSelect(sender){

var val = $(sender).val();

   //Hides all .select-container divs
   $(".select-container").addClass("hidden-div");
   
   
   //Shows the related div.
   if(val == "inbound"){
     $("#claimInbound").removeClass("hidden-div");
   }
   else if(val == "outbound"){
      $("#claimOutbound").removeClass("hidden-div");
   }
   
}

.hidden-div{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="type">
                    <label class="control-label col-md-2">@Localiser["Outbound"] / @Localiser["Inbound"]</label>
                    <br/>
                    <div class="col-md-10">
                        <select id="outboundInboundType" name="outboundInboundType" asp-items="@await SelectLists.OutboundInboundTypes()" class="form-control" onchange="showAproprateSelect(this);">
                        <option value="none">Select a value</option>
                        <option value="inbound">Inbound</option>
                        <option value="outbound">Outbound</option>
                        </select>
                    </div>
                </div>
<br/>
                    <div class="form-group select-container hidden-div" id="claimOutbound" >
                        <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.ClaimStatusTypes()">
                              <option value="select">Outbound value</option>
                            </select>
                            <span asp-validation-for="ClaimStatus" class="text-danger"/>
                        </div>
                    </div>
<br/>
                    <div class="form-group select-container hidden-div"  id="claimInbound">
                        <label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <select asp-for="ClaimStatus" class="form-control" asp-items="@await SelectLists.InboundClaimStatusTypes()">
                              <option value="select">Inbound value</option>
                            </select>
                            <span asp-validation-for="ClaimStatus" class="text-danger" />
                        </div>
                    </div>

Please signup or login to give your own answer.

Click here to cancel reply.