3

Estoy desarrollando un crud en php, con ajax y js

Cuándo doy de alta un registro en el modal correspondiente, tengo un select en el cual indico la categoría a la que pertenece el cuál almacena en la tabla estatus la opción seleccionada.

Mi problema viene cuando quiero editar algún registro el select me lo trae vacio. ¿Cómo debo hacer para que, al editar el registro el select muestre la opción que seleccion al momento que se dio de alta el registro.

Espero puedan entenderme, les comparto el codigo donde mando a llamar la funcion editar.

//Editar
    $(document).on("click", ".btnEditar", function () {
        opcion = 2;//editar
        fila = $(this).closest("tr");
        id = parseInt(fila.find('td:eq(0)').text()); //capturo el ID                    
        folio = fila.find('td:eq(1)').text();
        nombre = fila.find('td:eq(2)').text();
        apellido = fila.find('td:eq(3)').text();
        direccion = fila.find('td:eq(4)').text();
        descripcion_domicilio = fila.find('td:eq(5)').text();
        telefono = fila.find('td:eq(6)').text();
        num_contrato = fila.find('td:eq(7)').text();
        fecha_inicio = fila.find('td:eq(8)').text();
        fecha_final = fila.find('td:eq(9)').text();
        cuadrilla = fila.find('td:eq(10)').text();
        estatus = fila.find('td:eq(11)').text();
        console.log(estatus)
        observaciones = fila.find('td:eq(12)').text();
        encargado_cuadrilla = fila.find('td:eq(13)').text();
        otra_descripcion = fila.find('td:eq(14)').text();
        $("#folio").val(folio);
        $("#nombre").val(nombre);
        $("#apellido").val(apellido);
        $("#direccion").val(direccion);
        $("#descripcion_domicilio").val(descripcion_domicilio);
        $("#telefono").val(telefono);
        $("#num_contrato").val(num_contrato);
        $("#fecha_inicio").val(fecha_inicio);
        $("#fecha_final").val(fecha_final);
        $("#cuadrilla").val(cuadrilla);
        $("#estatus").val(estatus);
        $("#observaciones").val(observaciones);
        $("#encargado_cuadrilla").val(encargado_cuadrilla);

Aqui muestro parte del codigo, que esta dentro del modal donde muentro las categorias al aque pertenece el select

<div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="" class="col-form-label">Estatus</label>
                                <select name="status" id="estatus" class="form-control" required>
                                    <option selected>eleccione una opción</option>
                                    <option value="1">Pendiente</option>
                                    <option value="2">En Proceso</option>
                                    <option value="3">Terminado</option>
                                </select>
                            </div> 

2 respuestas 2

3

Puedes usar esto:

  $("#estatus option:contains(" + estatus + ")").attr('selected', '')

donde:

  • $("#estatus option:contains(" + estatus + ")") apunta al option el cual contiene el mismo texto que la columna que recoges con la variable estatus.
  • attr('selected', '') le agrega el atributo selected al option precedido.

Aquí dejo un snippet de ejemplo:

$(document).on("click", ".btnEditar", function() {
  opcion = 2; //editar
  fila = $(this).closest("tr");
  nombre = fila.find('td:eq(0)').text();
  estatus = fila.find('td:eq(1)').text();
  $("#nombre").val(nombre);
  $("#estatus option:contains(" + estatus + ")").attr('selected', '')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>juan</td>
    <td>En Proceso</td>
    <td>
      <button class="btnEditar">
        Editar
      </button>
    </td>
  </tr>
</table>
<form>
  <div class="row">
    <div class="col-lg-6">
      <input id="nombre">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group">
        <label for="" class="col-form-label">Estatus</label>
        <select name="status" id="estatus" class="form-control" required>
          <option selected>Seleccione una opción</option>
          <option value="1">Pendiente</option>
          <option value="2">En Proceso</option>
          <option value="3">Terminado</option>
        </select>
      </div>
    </div>
  </div>

</form>

18
  • si me recupera la información pero cuando le doy en editar, mi select aparece las opciones duplicadas. Commented el 26 abr. 2022 a las 19:44
  • Perdona, tienes razón, acabo de corregir mi respuesta, actualiza esta página y pruébala de nuevo.
    – masterguru
    Commented el 26 abr. 2022 a las 20:04
  • hola tu código me funciono bien, pero ahora tengo un problema, cuando intento editar algún registro, me aparece el último registro que edite, tengo que presionar varias veces F5 para poder editar otro registro, y en ocasiones no me recupera el valor. Alguna forma de poder corregir ese error? Commented el 6 oct. 2022 a las 18:44
  • mmm... no estoy seguro de entenderte... si acaso abre otra pregunta con tu código actual con varios registros y lo vuelvo a mirar (lo digo porque quizas has cambiado algo de la disposición de la tabla o a mi se me pasó algo por alto y si lo veo espero encontrar el error). No cambies la pregunta actual, claro, sino las respuestas quedarán desincronizadas con la pregunta, gracias.
    – masterguru
    Commented el 6 oct. 2022 a las 18:53
  • te dejo el link de la nueva pregunta, espero me puedas ayudar es.stackoverflow.com/questions/560685/… Commented el 6 oct. 2022 a las 19:14
1

Para poder setear el ingreso guardado en la base de datos tienes que trabajar con el id del elemento, por ejemplo

      <select name="status" id="estatus" class="form-control" required>
            <option selected>eleccione una opción</option>
            <option value="1">Pendiente</option>
            <option value="2">En Proceso</option>
            <option value="3">Terminado</option>
      </select>

donde value debe ser el id del item en la base de datos.. Por ejemplo id=1 corresponderia a pendiente en mi base de datos de datos. En resumen para trabajar con select solo debes usar el id... Lo estas haciendo de la forma correcta.. pero al select no se le pasa el texto, se le pasa el value y deberia quedarte algo asi $("#estatus").val(idEstatus);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.