2

Hola buenas tardes disculpen tengo una duda, quiero agregar boton que al darle click me agregue N selects dinámicos

Este el html que tengo:

<h3>Origen: </h3>
      <input type="hidden" name="">
         <div class="input-group">
           <span class="input-group-addon">Estado: </span>
           <?php include_once("conexion.php");
             $sql = $bd->query('SELECT * FROM estados');
               if(filas($sql) > 0){ ?>
                 <select name="estados" id="estados" class="form-control">
                         <option value="0">Elegir</option>
                       <?php
                 while($dato = recorrer($sql)) { ?>
                   <option value="<?php echo $dato[1]; ?>"><?php echo $dato[2]; ?></option>
              <?php   }  ?>
                 </select>
             <?php  }else{
                 echo "<button>Agregar nuevo</button>";
               }
          ?>
         </div> 
       <div class="input-group">
         <span class="input-group-addon">Ciudad: </span>
           <select id="municipios" name="municipios" class="form-control">
                  <option value="">...</option>
          </select>
              <span class="input-group-btn"><a href="localidad.php" role="button" class="btn btn-success"> + </a></span>
       </div>

        <h3>Destino: </h3>
            <div class="input-group">
              <span class="input-group-addon">Estado: </span>
              <?php include_once("conexion.php");
                $sql = $bd->query('SELECT * FROM estados');
                  if(filas($sql) > 0){ ?>
                    <select name="estados1" id="estados1" class="form-control">
                            <option value="0">Elegir</option>;
                     <?php         
                    while($dato = recorrer($sql)) {  ?>
                      <option value="<?php echo $dato[1]; ?>"><?php echo $dato[2]; ?></option>;
                   <?php }?>
                    </select>
                  <?php }else{
                    echo "<button>Agregar nuevo</button>";
                  }
             ?>
            </div>
             <div class="input-group">
               <span class="input-group-addon">Ciudad: </span>
                 <select id="municipios1" name="municipios1" class="form-control">
                        <option value="">...</option>
                </select>

Tengo este script:

  <script type="text/javascript">
    $(document).ready(function () {
    $('#estados').change(function(event){
      $('.load').fadeIn();
      if($(this).val()!= '0'){
      $.post('municipios.php', {'id_estado':$(this).val()}, function(data){
        $('#municipios').html(''+data);
      });
      $('.load').fadeOut();
    }else{
      $('.load').fadeOut();
      //a
    }
    });
    $('#estados1').change(function(event){
      $('#load').fadeIn();
      if($(this).val()!= '0'){
      $.post('municipios.php', {'id_estado1':$(this).val()}, function(data){
        $('#municipios1').html(''+data);
      });
      $('#load').fadeOut();
    }else{
      $('#load').fadeOut();
      //a
    }
    });
  });

  </script> 

el codigo ya me funciona perfecto la duda que tengo es como hacer para agregar otro select con los mismos datos algun consejo

De los respectivos dos primeros selects dinámicos que tengo lo que no se hacer aun es de cierta manera generar N selects dinámicos lo que no eh encontrado es algun ejemplo de ello.

El modulo del sistema que estoy haciendo es de rutas así es el proceso

  1. Selecciono el origen estado, después la ciudad de ese estado
  2. Selecciono el destino estado, después la ciudad de ese estado
  3. Si va haber paradas en algún estado dar click en el botón para mostrar otro select y así seleccionar un estado y su municipio
1

2 respuestas 2

1

Lo que que quieres realizar se puede hacer fácilmente utilizando la función clone de Jquery, pero sería necesario organizar un poco el código que tienes.

Este código se acerca a lo que quieres realizar, sólo no agregué el código php que genera el select para poder crear un ejemplo ejecutable y mostrar el comportamiento del código. ;)

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h3>Origen: </h3>
<div class="destino">
    <div class="input-group">
        <span class="input-group-addon">Estado: </span>
        <select id="estados1" name="estados" class="form-control estado" onchange="ObtenerCiudades(this);">
            <option value="0">Elegir</option>
            <option value="1">Estado 1</option>
            <option value="2">Estado 2</option>
            <option value="3">Estado 3</option>
        </select>
    </div> 
    <div class="input-group">
     <span class="input-group-addon">Ciudad: </span>
       <select id="municipios1" name="municipios" class="form-control ciudad">
              <option value="">...</option>
              <option value="">Ciudad 1</option>
              <option value="">Ciudad 2</option>
              <option value="">Ciudad 3</option>
      </select>
    </div>
</div>
<span class="input-group-btn"><a href="#" role="button" class="btn btn-success" onclick="AgregarDestino();"> + </a></span>
function ObtenerCiudades(select)
{   
    $('.load').fadeIn();
    if($(this).val()!= '0')
    {
        var id = $(select).attr("id").replace("estados", "");

        $.post('municipios.php', {'id_estado':$(this).val()}, function(data)
        {
            $('#municipios'+id).html(''+data);
        });
        $('.load').fadeOut();
    }else{
      $('.load').fadeOut();
      //a
    }
}

var counter = 2;

function AgregarDestino()
{

    //clone the first row
    var newRow =  $('.destino:first').clone();

    newRow.find(".estado").attr("id", "estados"+counter);
    newRow.find(".ciudad").attr("id", "municipios"+counter);

    $('.destino:last').after(newRow);

    counter ++;

    return false;
}
1
  • tu codigo esta excelente amigo, busque otro metodo talves no el mas adeacuado pero agregue un campo donde pido el numero de escalas despues lo almaceno en un valor en javascripty con un for hago los selects y solo en los name y variables pongo el contador para que asi los distinga Commented el 14 mar. 2017 a las 22:17
0

En el ejemplo que coloco abajo, al presionar el botón que hice haz click, cambia el html del div con id "seccionCombo" y dibuja el html que hay entre las comillas. Esta práctica está en javascript puro, por lo que no necesitas librerias de JQuery u otras. En el ejemplo dibujo un div html al momento de hacerle click al boton, dentro del div puedes poner cualquier tipo de código html.

<input type="button" value="Haz Click!" onclick="DibujaCombo()"/>
<div id="seccionCombo"></div>
<script type="text/javascript">
function DibujaCombo(){
    document.getElementById("seccionCombo").innerHTML = '<div id="nuevoDiv" style="width:100px;height:100px;background-color:red;"></div>'; 

</script>

Saludos.

1
  • es buena la idea pero el problema que tengo es que necesito mandar la variable de los N selects por post desde javascript a php para que me genera la consulta y devorverme un resultado la limitante que tengo es como hacer para que php sepa cuantas consultas de combos me tiene que devolver Commented el 14 mar. 2017 a las 22:25

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.