jQuery 클로닝 드롭 다운

Question

새로운 영역에서 작업하고 복제를 테스트하고 있습니다. 나는 그것이 내가 필요한 것을 정확히 도움이 될 것이라고 믿는다. 주요 아이디어는 두 번째 날짜 (종료 날짜)를 선택한 다음 시작 및 종료 시간을 적절하게 설정 한 후입니다. 예를 들어 3 일간의 워크샵이있는 경우 매일 다른 시간에 시작하고 종료 할 수있는 기회가 있습니다.

몇 가지 결과를 내기 위해 경고를받을 수 있습니다 ... 예를 들어, 나는 날짜 차이를 얻을 수 있습니다.

시작 및 종료 시간을 복제하는 데 어려움이 있습니다.

//HTML 
<form action="#" method="post"><center> 
<table width="75%" border="0" cellpadding="10"> 
<tr> 
<td align="center">Workshop Title: <input name="workshoptitle" type="text" size="50" maxlength="100" /></td> 
</tr> 
<tr> 
<td align="center">Workshop Description: <br /> <textarea name="workshopdescription" rows="5" cols="40" /></textarea></td> 
</tr> 
<tr> 
<td align="center">Workshop Location:<br /> <textarea name="workshoplocation" cols="40" rows="4" /></textarea></td> 
</tr> 
<tr> 
<td align="center">Start Date:<input type="text" class="field_name" size="10" id="startDate" name="startDate" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
End Date:<input type="text" size="10" id="endDate" name="endDate" class="field_name" /> 
&nbsp;&nbsp;&nbsp;&nbsp; 
Early Registration Deadline:<input type="text" class="field_name" size="10" id="earlyregexpdate" name="earlyregexpdate" /></td> 
</tr> 
<tr> 
<td align="center">Start Time:<select name="startHour1" id="startHour1" class="clonedInput"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option selected="selected">9</option> 
<option>10</option> 
<option>11</option> 
<option>12</option> 
</select> 
<font size="+2">:</font> 
<select name="startMinute1" id="startMinute1" class="clonedInput"> 
<option>00</option> 
<option>15</option> 
<option>30</option> 
<option>45</option> 
</select> 
&nbsp;&nbsp; 
<select name="startampm1" id="startampm1" class="clonedInput"> 
<option>AM</option> 
<option>PM</option> 
</select> 
&nbsp;&nbsp; 
End Time:<select name="endHour1" id="endHour1" class="clonedInput"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option selected="selected">5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>9</option> 
<option>10</option> 
<option>11</option> 
<option>12</option> 
</select> 
<font size="+2">:</font> 
<select name="endMinute1" id="endMinute1" class="clonedInput"> 
<option>00</option> 
<option>15</option> 
<option>30</option> 
<option>45</option> 
</select> 
&nbsp;&nbsp; 
<select name="endampm1" id="endampm1" class="clonedInput"> 
<option>AM</option> 
<option selected="selected">PM</option> 
</select></td> 
</tr> 
<tr> 
<td align="center">Open Registration Date:<input type="text" class="field_name" size="10" id="displayDate" name="displayDate" /> 
&nbsp;&nbsp; 
Would you like to make this workshop available? - Yes&nbsp; 
<input name="makeAvailable" type="checkbox" value="Y" /></td> 
</tr> 
<tr> 
<td align="center">Number of Presenters: <select name="nbrOfSpeakers"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>9</option> 
<option>10</option> 
</select> 

</td> 
</tr> 
</table> 
</center> 

<br /><br /><center><input name="submit" type="submit" value="Submit" /> 
<input name="reset" type="reset" value="Reset Form" /> 
<input name="cancel" type="submit" value="Cancel" /> 


</center> 
</form> 

jQuery를

$(document).ready(function() { 
    $('#display').hide(); 


    //http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/ 
    $('#startDate').datepicker({ 
     dateFormat: 'M dd, yy', 
     minDate: '-6m', 
     maxDate: '6m', 
     showButtonPanel: true 
    }); 

    $('#endDate').datepicker({ 
     dateFormat: 'M dd, yy', 
     minDate: '-6m', 
     maxDate: '6m', 
     showButtonPanel: true 
    }); 


    $('#earlyregexpdate').datepicker({ 
     dateFormat: 'M dd, yy', 
     minDate: '-6m', 
     maxDate: '6m', 
     showButtonPanel: true, 
     beforeShow: function() { 

      $(function() { 
       $("#startDate").datepicker({ 
        dateFormat: 'mm/dd/yyyy' 
       }); 
       $("#endDate").datepicker({ 
        dateFormat: 'mm/dd/yyyy' 
       }); 
      }); 

      //Total number of dates selected 
      var start_date = $('#startDate').datepicker('getDate'); 
      var end_date = $('#endDate').datepicker('getDate'); 
      var total_days = (end_date - start_date)/1000/60/60/24; 


for (i = 0; i < total_days; i++) { 

      var num = $('.clonedInput').length; 

      var newNum = Number(num + 1); 

      var startHour = $('#startHour' + num).clone().attr('id', 'name' + newNum); 
      var startMinute = $('#startMinute' + num).clone().attr('id', 'name' + newNum); 
      var startampm = $('#startampm' + num).clone().attr('id', 'name' + newNum); 
      var endHour = $('#endHour' + num).clone().attr('id', 'name' + newNum); 
      var endMinute = $('#endMinute' + num).clone().attr('id', 'name' + newNum); 
      var endampm = $('#endMinute' + num).clone().attr('id', 'name' + newNum); 

       startHour.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       startMinute.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       startampm.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       endHour.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       endMinute.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       endampm.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 


       $('#startHour' + num + ':').after(endampm); 
       $('#startMinute' + num + ' ').after(endampm); 
       $('#startampm' + num + ' ').after(endampm); 
       $('#endHour' + num + ':').after(endampm); 
       $('#endMinute' + num + ' ').after(endampm); 
       $('#endampm' + num).after(endampm); 
      } 
     } 

    }); 



    $('#displayDate').datepicker({ 
     dateFormat: 'M dd, yy', 
     minDate: '-6m', 
     maxDate: '6m', 
     showButtonPanel: true 
    }); 


}); 

Answer 1

귀하의 마지막 라인은

$('#startHour' + num + ':').after(endampm); 
... 

잘못 될 것 같다. 원하는 항목은

$('#startHour' + num + ':').insertAfter(endampm); 
...