【问题标题】：jQuery is not working, when i add more drop down listsjQuery 不起作用，当我添加更多下拉列表时
【发布时间】：2013-10-05 16:40:01
【问题描述】：

我创建了包含多个下拉列表的页面。下拉列表之一基于对另一个下拉列表的选择进行填充。我还在页面末尾添加了一个按钮。当我选择“添加更多项目”时，我需要再添加一列。问题是当我运行代码时，一切正常。当我单击“添加更多项目”按钮时，它不会根据第一个下拉列表的选择显示第二个下拉列表。只显示一个下拉列表，上面选择了它。

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>

【问题讨论】：

请附上小提琴。
这是我的小提琴。 jsfiddle.net/sapankumar/StzvU 但问题是第二个下拉列表填充在我的浏览器中，而不是在小提琴中。我不知道原因
是的，它似乎根本不起作用......无论如何你应该将它编辑到你的问题中

标签： javascript jquery html

【解决方案1】：

首先，您必须将 id 更改为类。

然后您必须稍微修改一下您的 populateSelect 函数以接受上下文。

此外，您必须使用.on() 在固定父级（非动态添加的父级）上连接您的事件。

这里是工作 JSFiddle 的链接：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);
}

【讨论】：

请再检查一次，先点击第一个下拉列表，然后选择第二个下拉列表。单击添加按钮，然后尝试选择第一个下拉列表，第二个下拉列表项不更改。谢谢。
对不起，我想你没有理解这个问题。一旦按照我的指示做同样的事情。到时候你就知道了。

【解决方案2】：

改进的小提琴：http://jsfiddle.net/StzvU/3/

您的问题是 ID 重用和事件附加。

每个页面的每个 ID 都应该是唯一的。当您克隆行时，会重复使用相同的 ID。

此外，当您使用 innerHTML 添加行时，您不会将事件附加到它们。

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

只有 HTML onload 中的元素才会获得事件。即使您确实将事件附加到生成的代码中，您仍然会遇到 ID 重用问题。

【讨论】：

即使我也用类替换了 id。即使那样它也不起作用。

【解决方案3】：

我看到你已经得到了答案，但这里有另一个工作的 JSFiddle：

http://jsfiddle.net/R3Pds/

您可以通过添加 onchage 事件来解决具有相同 ID 的问题：

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

【讨论】：