0

tengo el siguiente select creado con php para mostrar el directorio de una carpeta específica. el select lo creo de esta manera dado que le envío la ruta mediante ajax. luego muestro o cargo el select dentro de un div

<div id="select-directorio"></div>

$ruta = $_POST['ruta'];

        $cadena = "<select id='ruta_directorio' name='ruta_directorio' class='form-control input-sm'>";
        $cadena = $cadena . '<option value="">Seleccione</option>';

        $directorio = $ruta;
        $ficheros  = scandir($directorio, 1);
        $contador = 0;

        while ($contador < count($ficheros)) {
            if ($ficheros[$contador] != "." && $ficheros[$contador] != "..") {
                $cadena = $cadena . '<option value=' . $ficheros[$contador] . '>' . $ficheros[$contador] . '</option>';
            }
            $contador++;
        }
        echo $cadena . "</select>";

y tengo el siguiente código en js para detectar cuando cambie la selección del select, pero aun sin funcionar, dado que no detecta cuando cambio de opción.


$('#ruta_directorio').on('change', function() {
        dir_select = $('#ruta_directorio').val();
        if (dir_select != "") {
            document.getElementById('referencia_ruta').innerHTML = "/" + dir_select; // le asigno el valor a un label
        }
    });

espero haber sido claro y me puedan ayudar con esto... GRACIAS!

1 respuesta 1

1

Tu código debería funcionar, pero estás cometiendo un error al concatenar en PHP: dentro del while haces esto:

$cadena = $cadena . '<option value=' . $ficheros[$contador] . '>' . $ficheros[$contador] . '</option>';

Así, se rompe todo lo que pusiste antes del while y el select no se crea adecuadamente. Si cambiar por esto:

$cadena .= '<option value=' . $ficheros[$contador] . '>' . $ficheros[$contador] . '</option>';

continuarás concatenando y el select se creará completo, con su id.

Dado que la mezcla de comillas dobles y simples y los puntos y etiquetas del tipo < y > crean un código demasiado confuso en PHP a mi me gusta más este estilo:

    $cadena = "<select id=\"ruta_directorio\" name=\"ruta_directorio\" class=\"form-control input-sm\">
    <option value=\"\">Seleccione</option>";

    $directorio = $ruta;
    $ficheros  = scandir($directorio, 1);
    $contador = 0;

    while ($contador < count($ficheros)) {
        if ($ficheros[$contador] != "." && $ficheros[$contador] != "..") {
            $cadena .=  "<option value=\"$ficheros[$contador]\">$ficheros[$contador]</option>";
        }
        $contador++;
    }
    $cadena .="</select>";
    echo $cadena;

Se trata simplemente de usar comillas dobles para abarcar la cadena, y dentro de ella, usar también comillas dobles donde se necesite, escapándolas con \. Eso te permitirá meter variables dentro de la cadena sin necesidad de concatenar con el punto. Así el código queda más uniforme y más fácil detectar cualquier error.

Dos cosas sobre el código JS:

  • Puedes usar $(this) simplemente en el código para capturar el valor seleccionado.
  • Es más seguro usar textContent que innerHTML

He aquí un ejemplo:

$('#ruta_directorio').on('change', function() {
        dir_select = $(this).val();
        console.log(dir_select); /*Sólo para prueba, luego quitar esta línea*/
        if (dir_select != "") {
            document.getElementById('referencia_ruta').textContent = "/" + dir_select; // le asigno el valor a un label
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ruta_directorio">
  <option value="" selected>–Seleccione una ruta–</option>
  <option value="ruta1">Ruta 1</option>
  <option value="ruta2">Ruta 2</option>
  <option value="ruta3">Ruta 3</option>
</select>
<hr />
<label id="referencia_ruta"></label>

2
  • muchas gracias por ayuda y por la aclaración del código, pero el js no me detecta el cambio del select, quizás se deba en donde está generado en php, no lo se, pero lo solucione incorporando un onchange=myFuncion(this.value). especulo que js no detecta el cambio del select creado en php, porque tengo otros select en html y js si detecta los cambios entrando sin problema el 13 jul. 2020 a las 16:00
  • @OscarSantander debes saber que en jQuery esto # significa que se escucha el elemento por su id y que en una página no debe haber más de un elemento con el mismo id, revisa si realmente el select queda con id="ruta_directorio" y que nada más usa ese id. Si quieres escuchar varios elementos al mismo tiempo tienes que ponerle la misma clase y en jQuery usar un selector de clase, cuyo prefijo sería .laClase, como ves, en vez del # empieza por . y laClase sería el nombre que le des a la etiqueta class de los elementos.
    – A. Cedano
    el 13 jul. 2020 a las 17:16

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.