Hola, estoy perdido, ¿cómo puedo llamar a API desde mi lista desplegable?
Este es un código html
<div class="col"> <label for="text4" class="col-form-label">Price Mode</label> <select class="custom-select custom-select-sm col-10" id="select-price-mode"> <option value=""></option> </select> </div>Esta es mi api usando ajax
$.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:8080/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:"<query>", // Gets the apikey from the sessionStorage apikey:sessionStorage.getItem("apikey") }, success:function(data,textStatus,xhr) { console.log(data); }, error:function(xhr,textStatus,err) { console.log(err); } });y esta es mi respuesta json
[ { "PriceMode": "Price By Recyclables" }, { "PriceMode": "Service Charger" } ]Mi menú desplegable es Precio por reciclables y Cargador de servicio
Cómo puedo hacerlo ?
Si entiendo correctamente, está buscando agregar sus resultados de AJAX como elementos <option> a su <select> . En su controlador de éxito AJAX, simplemente recorra la matriz resultante y agregue cada elemento como <option> . Por ejemplo:
success: function(data) { for (let option of data) { $('#select-price-mode').append($('<option>', { value: option.PriceMode, text: option.PriceMode })); } } Advertencia: si tiene muchas opciones, esto podría reducir el rendimiento. En casos como ese, puede ser preferible construir una gran cadena HTML de <options> y luego agregar todo a <select> . Aunque en los casos en los que hay muchas opciones, probablemente querrá volver a pensar usando un simple <select> de todos modos.