的Javascript

Question

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

的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>

Answer 1

改进小提琴：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重用问题。

Answer 2

首先，您必须将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);
}

Answer 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>

当我添加更多下拉列表时，jQuery无法正常工作

的Javascript

HTML

3 个答案: