¿Cómo relacionar las opciones de un ‘select’ con las opciones de otro?

publicado por: Anonymous

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>

solución

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>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *