1

una ayuda por favor quisiera mostrar una lista dentro de otra lista segun la opciones que seleccione algo, al seleccionar de la lista esta muestre sus opciones que tiene y así sucesivamente. Espero hacerme entender e buscado en internet y no logro funcionar.

Seria de la sgte forma.

lista de un servicio determinado

al seleccionar algo de la lista que muestre otra lista según el servicio que escogí

Espero ser claro en el codigo tengo lo siguiente.

 <script language="JavaScript" type="text/JavaScript">
		function MostrarServicio(value)
    {
        if (value == '0029')
            document.getElementById("servicio").style.display = '';
        else
            document.getElementById("servicio").style.display = 'none';

 `<label class="weight-600">CLIENTE:</label>
	  	<select class="custom-select form-control" name="cod_cliente">
	      		<?
			 	while($row=mysql_fetch_array($result))
		                	echo "<option value='$row[0]' onclick=MostrarServicio'(this.value)'>
					$row[1] ";
			 mysql_close($link);
		        ?>

<!--Servio Renta Dig-->
<div id="servicio" style="display: none;">
		<td>Servicio: </td>
		<td>
			     <select class="custom-select form-control" name="servicio">
			       <option value="1">Pagos</option>
	           <option value="2">Actualizaciones</option>
			       <option value="3">Gastos Funerales</option>
			       <option value="4">RD y GF</option>
			     </select>
		</td>
</div> `

Espero que me puedan ayudar estoy ocupando el boostrap ese codigo me funciona solamente en mozila pero no en otros navegadores. es codigo antiguo y tengo que actualizarlo. GRacias.

1 respuesta 1

0

Hola lo que tienes que hacer es generar un listener al evento change del select que contiene las categorías "padres" y en ese evento tiene que hacer el cmabio de lo que quieres mostrar dependendiendo del valor seleccionado. Te dejo un ejemplo. Saludos.

const rubros = document.getElementById('rubros');

    function ocultarTodosLosSubrubros() {
      document.getElementById(`subrubros-1`).style.display = 'none';
      document.getElementById(`subrubros-2`).style.display = 'none';
    }

    rubros.addEventListener('change', () => {
      ocultarTodosLosSubrubros();
      if (rubros.value > -1) {
        document.getElementById(`subrubros-${rubros.value}`).style.display = 'block';
      }
    });

    ocultarTodosLosSubrubros();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div>
    <select name="rubros" id="rubros">
        <option value="-1">Seleccionar</option>
        <option value="1">Elemento 1</option>
        <option value="2">Elemento 2</option>
    </select>
    <h2 id="subrubros-1">SUBRUBROS 1</h2>
    <h2 id="subrubros-2">SUBRUBROS 2</h2>
</div>

</body>
</html>

1
  • Muchas gracias, ya me funciono.. el javascritp estaba peleando.
    – ReyBenDg
    el 30 mar. 2020 a las 21:57

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.