jQuery no funciona, cuando agrego más listas desplegables

Creé la página con varias listas desplegables. Una de las listas desplegables se rellena en función de la selección de la otra lista desplegable. y también agregué un botón al final de la página. Necesito agregar una columna más cuando selecciono "agregar un elemento más". El problema es que cuando ejecuto el código, todo funciona bien. cuando hago clic en el botón "agregar un elemento más", no se muestra la segunda lista desplegable según la selección de la primera lista desplegable. Solo se muestra una lista desplegable que se seleccionó arriba.

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
Dals=new Array("Moong","Chana","Ground","nut");
Flour=new Array('Chana','ravva','Gram');


$(function() {
  populateSelect();
    $('#cat').change(function(){
      populateSelect();
  });
 });

  function populateSelect(){
  cat=$('#cat').val();
  $('#item').html('');

  if(cat=='Dals'){
      Dals.forEach(function(t) { 
          $('#item').append('<option>'+t+'</option>');
      });
  }
  if(cat=='Flour'){
      Flour.forEach(function(t) {
          $('#item').append('<option>'+t+'</option>');
      });
     }

  } 



function add(tbl1) {

  var tb = document.getElementById(tbl1); 

  var rowCount = tb.rows.length;

  var row = tb.insertRow(rowCount);

  var colCount = tb.rows[1].cells.length;

  for(var i=0; i<colCount; i++) {

      var newCell = row.insertCell(i);

      newCell.innerHTML = tb.rows[1].cells[i].innerHTML;

  }

}
</script>

html

<body>

<form name="myForm"  onsubmit="return validateForm()" method="post">
<table id=cars border=1>

<tr><td>Category</td><td>Name</td></tr>

<tr>
<td><select name=car[] id="cat">

        <option value="Dals">Dals</option>
        <option value = "Flour">Flour</option>

</select></td>

<td><select name=car[] id="item">



</select></td>

</tr>

</table><br>
<p><input type=button value="Add one more item" onclick="add('cars')"/></p>
<center><input type=submit value=submit></center>

</form>

</body>

</html>

preguntado el 29 de septiembre de 13 a las 22:09

por favor incluya un violín. -

Aquí está mi violín. jsfiddle.net/sapankumar/StzvU pero la cuestión es que la segunda lista desplegable se está completando en mi navegador, no en el violín. no se la razon -

parece que no funciona en absoluto ... de todos modos, debe editar eso en su pregunta:

3 Respuestas

Primero, tienes que cambiar los ids a clases.

Luego, debe modificar un poco su función populateSelect para aceptar un contexto.

Además, tienes que conectar tus eventos usando .on() en un padre fijo (uno que no se agrega dinámicamente).

Aquí está el enlace al JSFiddle en funcionamiento: http://jsfiddle.net/StzvU/8/

Names  = {"Dals" : ["Moong", "Chana", "Ground", "nut"], 
          "Flour" : ["Chana", "ravva", "Gram"],
          "Mix" : ["GulabJamun", "RavvaDosa", "DosaMix", "IdlyMix"] };

$(document).ready(function () {
    populateSelect($(document));
    $('#cars').on('change', '.cat', function () {
        populateSelect($(this).parents('tr'));
    });
    $('#moar').click(function () {
        add('#cars');
    });
});

function populateSelect(line) {
    cat = $('.cat', line).val();
    $('.item', line).html('');

    Names[cat].forEach(function (t) {
            $('.item', line).append('<option>' + t + '</option>');
        });
}

function add(tbl1) {
    $table = $(tbl1);
    row = $('tr', $table).last().clone();
    populateSelect(row);
    $table.append(row);
}

Respondido el 30 de Septiembre de 13 a las 02:09

Verifique una vez más, primero haga clic en la primera lista desplegable y seleccione la segunda lista desplegable. Haga clic en el botón Agregar, luego intente seleccionar la primera lista desplegable, los elementos de la segunda lista desplegable no se modifican. Gracias. - cabestrillo

Lo siento, creo que no entendiste el problema. Una vez sigue mis instrucciones y haz lo mismo. Entonces, llegarás a saber. - cabestrillo

Violín mejorado: http://jsfiddle.net/StzvU/3/

Su problema es la reutilización de ID y la conexión de eventos.

Cada ID debe ser único por página. Cuando clona sus filas, se reutilizan los mismos ID.

Además, cuando utiliza innerHTML para agregar filas, no les está adjuntando eventos.

for (var i = 0; i < colCount; i++) {
    var newCell = row.insertCell(i);
    newCell.innerHTML = tb.rows[1].cells[i].innerHTML;
}

Solo los elementos en la carga de HTML obtienen eventos. Incluso si adjuntó eventos a su código generado, aún tendría su problema de reutilización de ID.

Respondido el 30 de Septiembre de 13 a las 00:09

Incluso reemplacé la identificación con la clase también. Incluso entonces no está funcionando. - cabestrillo

Veo que ya obtuviste la respuesta, pero aquí hay otra JSFiddle que funciona:

http://jsfiddle.net/R3Pds/

Problema con las mismas ID que puede resolver agregando onchage evento:

<select name=car[] id="cat" onchange="populateSelect(this);">
                    <option value="Dals">Dals</option>
                    <option value="Flour">Flour</option>
                    <option value="Mix">Mix</option>
                </select>

Respondido el 30 de Septiembre de 13 a las 03:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.