Tema: Añadir más campos SELECT dinámicamente
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/07/2011, 11:00
alexg88
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: Añadir más campos SELECT dinámicamente
El código html:

Código HTML: 
Ver original
  1. <html><head>
  2.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3.   <title> - jsFiddle demo by alexg88</title>
  4.   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
  5.   
  6.   <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  7.   <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  8.   
  9.   <style type="text/css">
  10.     
  11.   </style>
  12.   
  13.   <script type="text/javascript">
  14.   //<![CDATA[ 
  15.   $(function(){
  16.       var counter = 1;
  17.  
  18.     $("#addButton").click(function () {
  19.  
  20.  if(counter>10){
  21.             alert("Only 10 textboxes allow");
  22.             return false;
  23.  }   
  24.  
  25.         var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});
  26.         
  27.         $.ajax({
  28.   url: 'selects.php',
  29.   dataType: "html",
  30.   success: function(data) {
  31.     select.html(data);
  32.   }
  33. });        
  34.  
  35.  
  36.  select.appendTo("#TextBoxesGroup");
  37.  
  38.  
  39.  counter++;
  40.      });
  41.  
  42.      $("#removeButton").click(function () {
  43.      if(counter==1){
  44.           alert("No more textbox to remove");
  45.           return false;
  46.        }   
  47.  
  48.  counter--;
  49.  
  50.         $("#select" + counter).remove();
  51.  
  52.      });
  53.  
  54.      $("#getButtonValue").click(function () {
  55.  
  56.  var msg = '';
  57.  for(i=1; i<counter; i++){
  58.       msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
  59.  }
  60.        alert(msg);
  61.      });
  62.   });
  63.   //]]> 
  64.   </script>
  65.   
  66. </head>
  67. <body>
  68.   
  69.  
  70. <div id="TextBoxesGroup"> 
  71. </div>
  72. <input type="button" value="Add Button" id="addButton">
  73. <input type="button" value="Remove Button" id="removeButton">
  74. <input type="button" value="Get TextBox Value" id="getButtonValue">
  75.  
  76.  
  77. </body></html>


Este sería el código php (yo pongo un ejemplo que no se usa). Lo que tienes que hacer es devolver la lista de opciones como html. Hay más formas, pero esta es una de las más sencillas:

Código PHP: 
Ver original
  1. <option value="1">Uno</option>
  2. <option value="2">Dos</option>
  3. <option value="3">Tres</option>
  4. <option value="4">Cuatro</option>