Añadir más campos SELECT dinámicamente

apañero · #1 (**permalink**) 08/07/2011, 14:48

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>

alexg88 · #2 (**permalink**) 09/07/2011, 11:00

El código html:

Código HTML:

Ver original<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by alexg88</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    
  </style>
  
  <script type="text/javascript">
  //<![CDATA[ 
  $(function(){
      var counter = 1;
 
    $("#addButton").click(function () {
 
 if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
 }   
 
        var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});
        
        $.ajax({
  url: 'selects.php',
  dataType: "html",
  success: function(data) {
    select.html(data);
  }
});        
 
 
 select.appendTo("#TextBoxesGroup");
 
 
 counter++;
     });
 
     $("#removeButton").click(function () {
     if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
 
 counter--;
 
        $("#select" + 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>
<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>

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<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>

apañero · #3 (**permalink**) 09/07/2011, 17:39

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!

apañero · #4 (**permalink**) 18/07/2011, 16:11

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