Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Añadir más campos SELECT dinámicamente

Estas en el tema de Añadir más campos SELECT dinámicamente en el foro de Frameworks JS en Foros del Web. Tengo un código que permite añadir y borrar campos de texto de un formulario de forma dinámica con Jqery y necesito modificar dos cosas solamente: ...
  #1 (permalink)  
Antiguo 08/07/2011, 14:48
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 16 años, 5 meses
Puntos: 0
Añadir más campos SELECT dinámicamente

Tengo un código que permite añadir y borrar campos de texto de un formulario de forma dinámica con Jqery y necesito modificar dos cosas solamente:

1- Que el campo que se cree nuevo sea SELECT y no de texto.
2- Que el campo creado sea un SELECT (igual siempre) cuyas opciones sean recogidas de una Base de Datos (con PHP)

Os dejo el código, creo que es sencillo de modificar, pero lo mío no es AJAX:

Código:
<script type="text/javascript">
 
$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
 if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
 }   
 
 var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);
 
 newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label>' +
       '<input type="text" name="textbox' + counter + 
       '" id="textbox' + counter + '" value="" >');
 
 newTextBoxDiv.appendTo("#TextBoxesGroup");
 
 
 counter++;
     });
 
     $("#removeButton").click(function () {
 if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
 
 counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
 var msg = '';
 for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
 }
       alert(msg);
     });
  });
</script>
</head><body>
 
<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
  <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
 </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
 
</body>
</html>
  #2 (permalink)  
Antiguo 09/07/2011, 11:00
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años, 5 meses
Puntos: 344
Respuesta: Añadir más campos SELECT dinámicamente

El código html:

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

Funciona, pero falta el estilo. Necesito poder poner antes de cada Select un texto en plan "Select 1" como estaba en el original, dentro de las etiquetas <label> </label> para indicar el número de Select y para que salgan con estilo, no todo seguidos y sin nombre como salen ahora.

<label>Textbox #1 : </label><select>...</select>

Muchas gracias!
  #4 (permalink)  
Antiguo 18/07/2011, 16:11
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Añadir más campos SELECT dinámicamente

¿Ninguna idea? Sólo es añadir un poco de html al campo, igual que en el ejemplo inicial...

Etiquetas: ajax, campos, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:30.