Hola, necesitaba ayuda, si selecciono un menú desplegable y selecciono de la opción ajax y aparece un campo de entrada oculto, ¿cómo puedo hacerlo?
<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>este es mi 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 // ie 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 // ie <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); } });y esta es mi respuesta ajax
[ { "PriceMode": "Price By Recyclables" }, { "PriceMode": "Service Charger" } ]Donde, digamos, si selecciono Precio por reciclables, aparece la lista desplegable oculta, ¿cómo puedo hacerlo?
Puede usar el evento onchange para activar una verificación y, si el usuario seleccionó el valor que desea, luego muestre el cuadro de selección. Tendría que agregar una identificación al div con el accesorio oculto ( divToDisplay ).
$("#select-price-mode").change(function() { if(this.value === "Price By Recyclables") { $('#divToDisplay').removeAttr('hidden'); } });Simplemente invoque una función cuando se seleccione una opción en la primera select
const checkPriceMode = () => { let value = $('.select-price-mode').val(); $('.payment-frequency').fadeOut(); if(value === 'Price By Recyclables') $('.payment-frequency').fadeIn(); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row"> <div class="col"> <label for="select-price-mode" class="col-form-label">Price Mode</label> <select onchange="checkPriceMode()" class="select-price-mode custom-select-sm col-10" id="select-price-mode" required> <option selected disabled value="">Select.....</option> <option value="Price By Recyclables">Price By Recyclables</option> <option value="Service Charger">Service Charger</option> </select> </div> <div class="col payment-frequency" 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>