Tengo una función de selección que mostrará el valor seleccionado según la API.
valor leído de la API
"status": "success", "result": { "fruit_id": 5, "fruit_name": Orange, } <select class="form-control mb-3" id="selectFruit"> <option value="99" hidden> Fruit</option> <option value="3">Apple</option> <option value="5">Orange</option> </select>Esto es lo que he probado
const getKnowledgeID = (sId) =>{ axios.get(`${api}bsl?id=${sId}`) .then(function(res){ //console.log(res); if(res.data.status =='success'){ a = res.data.result; let cat_type =''; if(a.fruit_id == 5){ cat_type += ` <select class="form-control mb-3" id="selectFruit"> <option value="99" hidden> Fruit</option> <option value="3">Apple</option> <option value="5" selected>Orange</option> </select> `; } else{ cat_type += ` <select class="form-control mb-3" id="selectFruit"> <option value="99" hidden> Fruit</option> <option value="3" selected>Apple</option> <option value="5">Orange</option> </select>`; } $('#fruit').append(` <div class="col-lg-12 md-mb-50"> <div class="form-group row"> <div class="col-lg-4"> <label class="form-label"> Fruit Category</label> ${cat_type} </div> </div> </div> `); } }); } Creo que esta no es una buena solución sobre cómo mostrar el valor seleccionado. ¿Qué pasa si tengo más de 5 <option> ? No quiero seguir repitiendo lo mismo. ¿Cómo mejoro este método para hacerlo más simple? ¿Cómo muestro que el id = 5 es el valor seleccionado en función del valor de la API?
La forma rápida de lograr lo que necesita es agregar el elemento de select sin nada seleccionado. Luego puede establecer su val() en función de fruit_id en la respuesta:
const getKnowledgeID = (sId) => { axios.get(`${api}bsl?id=${sId}`).then(function(res) { if (res.data.status == 'success') { $('#fruit').append(`<div class="col-lg-12 md-mb-50"><div class="form-group row"><div class="col-lg-4"><label class="form-label"> Fruit Category</label><select class="form-control mb-3" id="selectFruit"><option value="99" hidden> Fruit</option><option value="3">Apple</option><option value="5">Orange</option></select></div></div></div>`); $('#selectFruit').val(res.data.result.fruit_id); } }); } Sin embargo, la solución más óptima sería tener todo ese HTML ya presente en el DOM cuando se carga la página, oculto si es necesario. Cuando se reciba la respuesta de su llamada AJAX, muestre el contenido y luego configure val() en su lugar. Se prefiere este método porque elimina el código HTML del JS; idealmente, debería haber la menor mezcla posible de guiones.