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  id="type">
                    <label >@Localiser["Outbound"] / @Localiser["Inbound"]</label>
                    <div >
                        <select id="outboundInboundType" name="outboundInboundType" asp-items="@await SelectLists.OutboundInboundTypes()" ></select>
                    </div>
                </div>
```

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

Or Inbound Dropdown below

```
                    <div   id="claimInbound">
                        <label asp-for="ClaimStatus" ></label>
                        <div >
                            <select asp-for="ClaimStatus"  asp-items="@await SelectLists.InboundClaimStatusTypes()"></select>
                            <span asp-validation-for="ClaimStatus"  />
                        </div>
                    </div>
```


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

CodePudding user response：

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  id="type">
                    <label >@Localiser["Outbound"] / @Localiser["Inbound"]</label>
                    <br/>
                    <div >
                        <select id="outboundInboundType" name="outboundInboundType" asp-items="@await SelectLists.OutboundInboundTypes()"  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  id="claimOutbound" >
                        <label asp-for="ClaimStatus" ></label>
                        <div >
                            <select asp-for="ClaimStatus"  asp-items="@await SelectLists.ClaimStatusTypes()">
                              <option value="select">Outbound value</option>
                            </select>
                            <span asp-validation-for="ClaimStatus" />
                        </div>
                    </div>
<br/>
                    <div   id="claimInbound">
                        <label asp-for="ClaimStatus" ></label>
                        <div >
                            <select asp-for="ClaimStatus"  asp-items="@await SelectLists.InboundClaimStatusTypes()">
                              <option value="select">Inbound value</option>
                            </select>
                            <span asp-validation-for="ClaimStatus"  />
                        </div>
                    </div>

CodePudding user response：

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);