add dynamic combos from a button

Question

add dynamic combos from a button

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Hello good afternoon, sorry, I have a question, I want to add a button that when I clicked, add me N dynamic selects

This is the html that I have:

<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>

I have this 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>

the code already works perfect for me, the doubt I have is how to add another select with the same data some advice

Of the respective first two dynamic selects that I have what I do not do, it is in a certain way to generate N dynamic selects, what I have not found is an example of it.

The module of the system that I am doing is of routes like this is the process

I select the origin state, then the city of that state

I select the destination state, then the city of that state

If there are going to be stops in some state, click on the button to show another select and thus select a state and its municipality

javascript

asked by Jose Luis GP 14.03.2017 в 20:19

source

2 answers

Laravel 5.1 -Eager Loader gets me the last element of sub-fix Toolbar with alpha gradient in Android

score 0 · Answer 1

In the example that I put below, when pressing the button that I did click, change the html of the div with id "sectionCombo" and draw the html that is between the quotes. This practice is in pure javascript, so you do not need JQuery or other libraries. In the example I draw a div html at the moment of clicking the button, inside the div you can put any type of html code.

<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>

Greetings.

score 0 · Answer 2

What you want to do can be easily done using the clone function of Jquery, but it would be necessary to organize a bit the code you have.

This code is close to what you want to do, I just did not add the php code that generates the select to be able to create an executable example and show the behavior of the code. ;)

<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;
}