0

Tengo un formulario para un sistema de reserva de moteles, en un primer select se debe elegir el motel y en El Segundo el tipo de habitación, pero no todos los moteles tienen el mismo tipo de habitación. Necesitaría que al seleccionar el motel 1, me muestre los tipos de habitación de ese motel y así sucesivamente. ¡Gracias!

    <form action="reserva.php" method="post">
      <div class="col-sm-12 mt"> 
        <section> 
          <label for="motel">Elige el motel</label> 
          <select class="cs-select cs-skin-border" id="motel" name="motel" required> 
            <option value="0" selected>Selecciona una opción...</option> 
            <option value="Ibiza">Ibiza</option> 
            <option value="Carpe" >Carpe Diem Barrio Abajo</option>      
          </select> 
        </section> 
      </div>
8
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el recorrido de bienvenida para entender mejor como funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 25 oct. 2017 a las 17:05
  • 1
    Puedes mostrarnos que has intentado hacer? fragmentos de código? que has consultado? usas base de datos? para eso que pides podrías usar ajax, consulta sobre eso, te recomiendo que leas Cómo preguntar para que puedas crear preguntas que sean bien recibidas en la comunidad el 25 oct. 2017 a las 17:05
  • Debieras poner qué has intentado, porner una muestra de tu código, etc. Se supone que el sitio es para responder con detalles específicos cuando te quedas trancado con algo. De todos modos, la respuesta es poner un listener en el primer select, y cuando cambie modificar los contenidos del segundo select.
    – ffflabs
    el 25 oct. 2017 a las 17:07
  • podrías incluir mas información, algún fragmento de código que tengas para tener un contexto solido de lo que pretendes hacer y una pregunta ¿Los datos de las habitaciones de donde los obtienes, de una base de datos? el 25 oct. 2017 a las 17:11
  • @CamiloVasquez no uso base de datos, los datos son enviados al correo de manera directa. Hasta ahora solo tengo el primer select: <form action="reserva.php" method="post"> <div class="col-sm-12 mt"> <section> <label for="motel">Elige el motel</label> <select class="cs-select cs-skin-border" id="motel" name="motel" required> <option value="0" selected>Selecciona una opción...</option> <option value="Ibiza">Ibiza</option> <option value="Carpe" >Carpe Diem Barrio Abajo</option> </select> </section> </div> el 25 oct. 2017 a las 17:22

3 respuestas 3

2

Lo que puede servirte es tener una lista de habitaciones predeterminada para cada hotel y con el evento change cambias las opciones del select dependiendo la opcion que sea seleccionada en el select hotel, te dejo un codigo de ejemplo que espero pueda ayudarte

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="post"> 
  <div class="col-sm-12 mt"> <section>
   <label for="motel">Elige el motel: </label>
   <select class="cs-select cs-skin-border" id="motel" name="motel" required>
    <option value="0" selected>Selecciona una opción...</option>
    <option value="Ibiza">Ibiza</option> 
    <option value="Carpe" >Carpe Diem Barrio Abajo</option> 
  </select> 
 </div>
<br>
<div class="col-sm-12 mt"> <section>
 <label for="motel">Elige el Habitacion :</label>
 <select class="cs-select cs-skin-border" id="Habitacion" name="Habitacion" required>
  <option value="0" selected>Selecciona una opción...</option>
 </select> 
</div>


<script>
 $(document).on("change","#motel",function(){

var habitacionesIbiza = "<option value='0' selected>Selecciona una opción...</option><option value='1'>Sencilla</option><option value='2'>Doble</option>"
var habitacionesCarpe = "<option value='0' selected>Selecciona una opción...</option><option value='3'>Habitacion 1</option><option value='4'>Suite</option>"
var idMotel = $("#motel option:selected").val();

if(idMotel == "Ibiza")
    $("#Habitacion").html(habitacionesIbiza);
else if(idMotel =="Carpe")
    $("#Habitacion").html(habitacionesCarpe);
});
</script>
8
  • Hola, el código lastimosamente no me funcionó, al elegir una de las opciones del primer select en el segundo solo aparece "selecciona una opción..." el 26 oct. 2017 a las 3:38
  • ¿Tienes la referencia de jquery? el 26 oct. 2017 a las 14:06
  • Si, la 2.1.4 min el 26 oct. 2017 a las 15:39
  • Modifique la respuesta ya que si copiaste y pegaste me falto la etiqueta de cierre del script, puedes copiar el codigo y pegarlo en esta pagina para comprobar que funciona: cubicfactory.com/jseditor/welcome/130/edit el 26 oct. 2017 a las 16:57
  • En la pagina que me dijiste si funcionó, lo que se me ocurre es probar con la referencia de jQuery que colocas arriba. el 26 oct. 2017 a las 19:08
1

Utiliza jquery ó javascript para obtener el valor del primer select y depues creas un método con el onchange del primer select para que al cambiar de valor este sea notificado y realice una operación.

$('#select1').on('change',function(){
 var valueSelectUno=document.getElementById('selectUno').value;
 //ejemplo de uso
if(valueSelectUno===1){
   //cargar datos en otro select
}else{
   //otra opción
}
});

Aunque en lo personal te recomiendo que brindes más información de tu proyecto por sobre todo si estas trabajando con base de datos ya que también es importante.

3
  • Jose Antonio Dominguez Garcia tu sabes javascript?
    – Shareiv
    el 25 oct. 2017 a las 20:10
  • Hola, no uno base de datos, los datos se enviar automáticamente a un correo. el 26 oct. 2017 a las 3:36
  • En definitiva necesitas compartir un poco mas tu proyecto para así saber como apoyar. el 26 oct. 2017 a las 16:08
1

Puedes hacerlo con la propiedad class y data.

Ejemplo:

function h(){
opt = document.getElementsByClassName("hALL");
 for (i=0; i<opt.length; i++) {
 opt[i].style.display = "none";
 }

e = document.getElementById("hotel")
e = e[e.selectedIndex].dataset.hab.split(" ");
for (x=0;x<e.length;x++){
 opt = document.getElementsByClassName(e[x]);
  if (opt.length) {
   for (i=0; i<opt.length; i++) {
    opt[i].style.display = "";
   }
  }
 }
}
h("");
Seleccione Hotel:<br>
<select id="hotel" onchange="h()">
 <option data-hab=""></option>
 <option data-hab="h1">Hotel A </option>
 <option data-hab="h1 h2" >Hotel B </option>
 <option data-hab="h1 h2 h3">Hotel C </option>
</select>
<br>
Numero de Habitaciones:<br>
<select>
 <option></option>
 <option class="hALL h1">1 habitaciones</option>
 <option class="hALL h2">2 habitaciones</option>
 <option class="hALL h3">3 habitaciones</option>
</select>

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.