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); 
...