Question

我创建了一个div的克隆，其中有一些下拉按钮。在我的第一个下拉菜单中，下拉按钮非常有效（您将在代码中看到）。但是在我的克隆中，显示了下拉按钮，但是当我单击它们时，我希望它们像真正的那样工作。另一件事，我希望我的克隆始终显示在选定的服务列表之后。也就是说，如果我选择裤子，则将显示``裤子''的div，然后将显示``添加''按钮，裤子的div将保持不变，然后按``添加''按钮可以添加更多字段。也就是说，我可以通过从克隆“选择服务”中选择“衬衫”来显示“衬衫” div。我在 jquery 中寻找结果。 TIA

$(function() {
  $('#selectService').change(function() {
    $('.hidden-fields').hide();
    var $target = $(this).val();
    $('#' + $target).show();
  });
  
  //creating a clone
  // but how i add the same functionality????
  $("#add").click(function() {
     var $orderClone  = $("#orderClone:last");
     var $clone = $orderClone.clone();
     $clone.find('*').val('');
     $orderClone.after($clone);
   });
});

.hidden-fields {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orderClone" class="row">
  <div class="table-responsive">
    <table class="table table-striped">
      <tr>
        <th>Service</th>
      </tr>
      <tr>
        <td>
          <select id="selectService" name="service[]" class="form-controlservice">
            <option disabled="" selected="">Select Service</option>
            <option id="one" value="shirt">Shirt</option>
            <option value="pant">Pant</option>
            <option value="suit">Suit</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
</div>
<div class="col-md-4 hidden-fields" id="shirt">
  <h4><b>Shirt</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Body</label>
    <input type="text" class="form-control" name="body" />
  </div>
  <div class="form-group required">
    <label class="control-label">Shoulder</label>
    <input type="text" class="form-control" name="shoulder" />
  </div>
  <div class="form-group required">
    <label class="control-label">Neck</label>
    <input type="text" class="form-control" name="neck" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="pant">
  <h4><b>Pant</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Length</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Thigh</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="suit">
  <h4><b>Suit</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Name</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Name</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<br>
<button type="button" id="add" name="add" class="btn btn-success" >Add</button>

显示克隆中带有下拉按钮的现有div？

0 个答案: