0

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

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

3 回答 3

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 重用问题。

于 2013-09-29T23:16:16.180 回答
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);
}
于 2013-09-30T01:22:43.807 回答
1

我看到你已经得到了答案，但这里有另一个工作 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>
于 2013-09-30T02:04:27.573 回答