Question

我有dynamic form个select lists而不是每个select option查询我的数据库。我想只在clone foreach循环之外的PHP行中拥有完整的选项集。

现在我正在做这样的事情：

<table id="test" class="table">
<tr>
    <td>
        <select class="form-control" name="type[]">
            <option value="20">Auto Rental</option>
        </select>
    </td>
    <td>
        <select class="form-control" name="distance_type[]">
            <option value="1">Nearby</option>
        </select>
    </td>
</tr>
<tr class="clone">
    <td>
        <select class="readonly form-control" name="type[]" disabled>
            <option value="20">Boat Rental 1</option>
            <option value="20">Boat Rental 2</option>
            <option value="20">Boat Rental3</option>
        </select>
    </td>
    <td>
        <select class="readonly form-control" name="distance_type[]" disabled>
            <option value="1">Nearby</option>
            <option value="1">Far</option>
            <option value="1">10 miles</option>
        </select>
       </td>
    </tr>
</table>

<a class="add" href="#">Add New Row</a>

Javascript

         $(".add ").on('click', function () {
         var clone = $('.clone').closest('tr')[0];
         $(clone).clone().insertAfter(clone);
         $('.readonly').attr("disabled", false)
         });

我禁用了选择输入，因此除非＆＃34;添加＆＃34;否则它不会被提交。单击按钮。问题是，当我单击添加按钮时，它最终启用它并添加另一个字段。我只是想隐藏第一个实例，当点击它时启用它然后当我再次点击添加时它会添加新的字段等。

这是实时版https://jsfiddle.net/f4gp9uky/

尝试了一些像$('#el'):nth-child(n+3).hide();这样的东西，但这并不起作用。

任何建议都将不胜感激。

Answer 1

您可以执行类似

的操作

＆＃13;

var $clone = $('.clone');
$(".add ").on('click', function() {
  if ($clone.hasClass('hidden')) {
    $clone.removeClass('hidden').find('.readonly').prop("disabled", false)
  } else {
    $clone.clone().appendTo($clone.parent());
  }
});

＆＃13;

.hidden {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="test" class="table">
  <tr>
    <td>
      <select class="form-control" name="type[]">
        <option value="20">Auto Rental</option>
      </select>
    </td>
    <td>
      <select class="form-control" name="distance_type[]">
        <option value="1">Nearby</option>
      </select>
    </td>
  </tr>
  <tr class="clone hidden">
    <td>
      <select class="readonly form-control" name="type[]" disabled>
        <option value="20">Boat Rental 1</option>
        <option value="20">Boat Rental 2</option>
        <option value="20">Boat Rental3</option>
      </select>
    </td>
    <td>
      <select class="readonly form-control" name="distance_type[]" disabled>
        <option value="1">Nearby</option>
        <option value="1">Far</option>
        <option value="1">10 miles</option>
      </select>
    </td>
  </tr>
</table>
<a class="add" href="#">Add New Row</a>

＆＃13;

第一次克隆后的jQuery克隆表行

1 个答案: