더 많은 내부 divs 추가 jquery

-2

div 형식의 양식 필드가 있고 더 많은 단추를 추가하려면 div 자체가 있습니다. 따라서 addMore 단추를 클릭하면이 div를 모두 추가해야 어떻게 할 수 있습니까?더 많은 내부 divs 추가 jquery

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

나는 어떻게 처리 할 수 있는지 알고 싶습니다.

출처

2016-10-20 Mr world wide

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>

출처

2016-10-21 10:38:52

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

출처

2016-10-21 10:35:03

답변

관련 문제