Hi i needed some help where if i select a drop down and select from ajax option and a hidden input field appear how can i do it ?
<div class="form-row"> <div class="col"> <label for="select-price-mode" class="col-form-label">Price Mode</label> <select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required> <option selected disabled value="">Select ....</option> </select> </div> <div class="col" hidden> <label for="select-payment-frequency" class="col-form-label">Payment Frequency</label> <select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required> <option selected disabled value="">Select ....</option> </select> </div>
This is my ajax
// Here the calling Ajax for the drop down menu below $.ajax({ // The url that you're going to post /* This is the url that you're going to put to call the backend api, in this case, it's https://ecoexchange.dscloud.me:8080/api/get (production env) */ url:"https://ecoexchange.dscloud.me:8090/api/get", // The HTTP method that you're planning to use // i.e. GET, POST, PUT, DELETE // In this case it's a get method, so we'll use GET method:"GET", // In this case, we are going to use headers as headers:{ // The query you're planning to call // i.e. <query> can be UserGet(0), RecyclableGet(0), etc. query:"PriceModeGet()", // Gets the apikey from the sessionStorage apikey:sessionStorage.getItem("apikey") }, success:function(data,textStatus,xhr) { console.log(data); for (let option of data) { $('#select-price-mode').append($('<option>', { value: option.PriceMode, text: option.PriceMode })); } }, error:function(xhr,textStatus,err) { console.log(err); } });
and this is my ajax response
[ { "PriceMode": "Price By Recyclables" }, { "PriceMode": "Service Charger" } ]
Where say if i select Price By Recyclables the hidden drop down list appear how can i do it ?
Advertisement
Answer
You can use the onchange event to trigger a check and if the user selected the value you want, then display the selectbox. You’d have to add an id to the div with the hidden prop (divToDisplay
).
$("#select-price-mode").change(function() { if(this.value === "Price By Recyclables") { $('#divToDisplay').removeAttr('hidden'); } });