Menú desplegable de clonación de jQuery

Estoy trabajando en una nueva área y probando la clonación. Creo que funcionará exactamente para lo que lo necesito con un poco de ayuda. La idea principal es que después de seleccionar la segunda fecha (fecha de finalización), cree el número adecuado de horas de inicio y finalización. Por ejemplo, si tengo un taller de 3 días, existe la posibilidad de que cada día comience y termine a diferentes horas.

Puedo recibir una alerta para producir algunos resultados... por ejemplo, puedo obtener la diferencia de fechas.

Tener dificultades para clonar las horas de inicio y finalización.

//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
    });


});

preguntado el 27 de julio de 12 a las 06:07

1 Respuestas

Tus últimas líneas,

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

parece estar equivocado. Lo que probablemente quieras es

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

Respondido 27 Jul 12, 06:07

¡Gracias! Lo intentaré. - Softwaretech

Desafortunadamente no es un pero cambio. - Softwaretech

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.