如何在一次又一次更改时添加元素

Question

我使用display:none和.show()来完成这个任务。但是我想在更改第一个元素、第二个元素和添加第二个元素时使用.append()。

http://jsfiddle.net/xtb51wed/659/

$('#sel1').change(function() {
    $('#sel2').show();
});
$('#sel2').change(function() {
    $('#sel3').show();
});
$('#sel3').change(function() {
    $('#sel4').show();
});
$('#sel4').change(function() {
    $('#sel5').show();
});

Answer 1

对于下拉值的更改，如果是最后一个下拉clone，则为closest tr并附加到table。因为下拉列表是动态生成的，所以使用事件委托。

​

$(document).on('change','.sel',function() {
    if($(this).closest('tr').next('tr').length==0){
        var newTr = $(this).closest('tr').clone();
        $('table').append(newTr);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class='sel'>
          <option value='1'>value1</option>
          <option value='2'>value2</option>
          <option value='3'>value3</option>
          <option value='4'>value4</option>
          <option value='5'>value5</option>
      </select>
   </td>
 </tr>
</table>

​