Question

我有div格式的表单字段，并且在div中添加更多按钮本身，所以当我点击addMore按钮时，所有这个div都必须附加我怎么能这样做。

<div id="buildingInfo" >
<div class="form-group" >       
<div class="control-group">
<div class="col-sm-6">
    <label class="col-sm-4 control-label">Buildings </label>
    <div class="col-sm-8">
        <select count="0" name="hostel[0][building]" id="hostel_0_building"  class="form-control rounded">
            <option> Select Buildings</option>
            <option>Building 1 </option>
            <option>Building 2 </option>
            <option>Building 3 </option>
            <option>Building 4 </option>
            <option>Building 5 </option>
        </select>
    </div>
</div>
<div class="col-sm-6">
    <label class="col-sm-4 control-label">Floors </label>
    <div class="col-sm-8">
        <select count="0" name="hostel[0][floor]" id="hostel_0_floor" class="form-control rounded">
            <option> Select Floors</option>
            <option>Floor 1 </option>
            <option>Floor 2 </option>
            <option>Floor 3 </option>
            <option>Floor 4 </option>
            <option>Floor 5 </option>
            <option>Floor 6 </option>
            <option>Floor 7 </option>
        </select>
    </div>
</div>
<div >&nbsp;</div>
<div class="col-sm-6">
    <label class="col-sm-4 control-label">Flats</label>
    <div class="col-sm-8">
        <select  count="0" name="hostel[0][flat]" id="hostel_0_flat" class="form-control rounded">
            <option> Select Flats</option>
            <option>Flat 1 </option>
            <option>Flat 2 </option>
            <option>Flat 3 </option>
            <option>Flat 4 </option>
            <option>Flat 5 </option>
            <option>Flat 6 </option>
            <option>Flat 7 </option>
            <option>Flat 8 </option>
            <option>Flat 9 </option>
            <option>Flat 10 </option>
        </select>
    </div>
</div>
<div class="col-sm-6">
    <label class="col-sm-4 control-label">Rooms </label>
    <div class="col-sm-8">
        <select  count="0" name="hostel[0][room]" id="hostel_0_room" class="form-control rounded">
            <option> Select Rooms</option>
            <option>Room 1 </option>
            <option>Room 2 </option>
            <option>Room 3 </option>
            <option>Room 4 </option>
            <option>Room 5 </option>
            <option>Room 6 </option>
            <option>Room 7 </option>
            <option>Room 8 </option>
            <option>Room 9 </option>
            <option>Room 10 </option>
        </select>
    </div>
</div>
<div>&nbsp;</div>
<div class="col-sm-6">
    <label class="col-sm-4 control-label">Beds </label>
    <div class="col-sm-8">
        <input type="number" required="required" min="1" max="40"  count="0" name="hostel[0][bed]" id="hostel_0_bed" class="form-control rounded" placeholder="select Rooms" value="" />
    </div>
</div>
</div>
<div class="col-sm-6 text-center" >
<button type="button" class="btn btn-info btn-s-xs  addBuilding">+ Add More Buildings</button>
</div>
</div>
</div>
</div>

我想知道这个过程我该怎么做。

Answer 1

http://codepen.io/unifx/pen/gwkWdy

我实际上只是为那些删除了他们的问题的人做了这个。

<select class="form-control" id="priceCountSelect" onChange="PriceSelect();">
  <option value="1">Price 1</option>
  <option value="2">Price 2</option>
  <option value="3">Price 3</option>
  <option value="4">Price 4</option>
  <option value="5">Price 5</option>
</select>
<div id="price-container">

</div>
<script>
function PriceSelect() {
  var Prices         = document.getElementById('priceCountSelect');
  var PriceContainer = document.getElementById('price-container');
  var PricesOption   = Prices.options[Prices.selectedIndex].value;

  for(var i = 0; i < PricesOption; i++) {
    alert('this is counted');
    PriceContainer.innerHTML += '<div>Price is 0' + i + '</div>';
  }
}
</script>

Answer 2

<script type="text/javascript" language="JavaScript">   
    $(document).ready(function () { 
        var buildingCount=1;
        $(".addBuilding").click(function () {
            //alert(coming here);
            $('#buildingInfo').append('<div class="line line-dashed line-lg pull-in"></div><div class="form-group"><div class="control-group" ><div class="col-sm-6"><label class="col-sm-4 control-label">Buildings </label><div class="col-sm-8"><select count="'+buildingCount+'" name="hostel['+buildingCount+'][building]" id="hostel_'+buildingCount+'_building" class="form-control rounded"><option> Select Buildings</option><option>Building 1 </option><option>Building 2 </option><option>Building 3 </option></select></div></div><div class="col-sm-6"><label class="col-sm-4 control-label">Floors </label><div class="col-sm-8"><select count="'+buildingCount+'" name="hostel['+buildingCount+'][floor]" id="hostel_'+buildingCount+'floor" class="form-control rounded"><option> Select Floors</option><option>Floor 1 </option><option>Floor 2 </option><option>Floor 3 </option></select></div></div><div >&nbsp;</div><div class="col-sm-6"><label class="col-sm-4 control-label">Flats</label><div class="col-sm-8"><select count="'+buildingCount+'" name="hostel['+buildingCount+'][flat]" id="hostel_'+buildingCount+'flat" class="form-control rounded"><option> Select Flats</option><option>Flat 1 </option><option>Flat 2 </option><option>Flat 3 </option><option>Flat 4 </option></select></div></div><div class="col-sm-6"><label class="col-sm-4 control-label">Rooms </label><div class="col-sm-8"><select count="'+buildingCount+'" name="hostel['+buildingCount+'][room]" id="hostel_'+buildingCount+'room" class="form-control rounded"><option> Select Rooms</option><option>Room 1 </option><option>Room 2 </option></select></div></div><div>&nbsp;</div><div class="col-sm-6"><label class="col-sm-4 control-label">Beds </label><div class="col-sm-8"><input type="number" required="required" min="1" max="40"  count="'+buildingCount+'" name="hostel['+buildingCount+'][bed]" id="hostel_'+buildingCount+'bed" class="form-control rounded" placeholder="select Rooms" value="" /></div></div><div class="col-sm-6 text-center"><button type="button" class="btn btn-info btn-s-xs removeBuilding" id="'+buildingCount+'" >- Remove Building</button></div></div></div>');
            buildingCount++;
            console.log(buildingCount);
        }); 

        $("#buildingInfo").on('click','.removeBuilding',function(){
            console.log($(this).parent());
            $(this).parent().parent().remove();
        }); 
    }); 
    <script>

添加更多内部divs jquery

2 个答案: