webForumDet fria alternativet

Populera select-lista, men bara en gång

JavaScript

0 svar · 623 visningar · startad av MickeA.com

Medlem sedan feb. 20034 441 inlägg
Frågan#1

Tjena hej,

Har ett veckoschema enl. bifogad bild. Formuläret laddas in via Ajax i en jQueryUi Dialog.

När man kryssar i checkboxen tänds alla selectlistor på samma rad upp. Därefter ska de 4 för klockslag populeras. Har nu gjort såhär, vilket fungerar:

function PopulateTimeList(selector) {
    var select = $(selector);
    var hours, minutes, ampm;
    for(var i = 300; i <= 1440; i += 5){
        hours = Math.floor(i / 60);
		
		if (hours < 10){
            hours = '0' + hours; // adding leading zero
        }

        minutes = i % 60;
        if (minutes < 10){
            minutes = '0' + minutes; // adding leading zero
        }

	select.append($('<option></option>')
            .attr('value', i)
            .text(hours + ':' + minutes)); 
    }
}

$(function(){
	$('#dialogOccasions').on('change', 'input:checkbox', function(){
		var Elem = $(this).closest('tr').find('select');
		$(Elem).prop("disabled", !this.checked);

		var TimeLists = $(this).closest('tr').find('select.Time');
		$(TimeLists).on('mousedown', function(){
			PopulateTimeList($(this));
		});
	});
});

HTML-koden ser ut såhär:

<table style="width: 100%;">
<thead>
<tr>
<th style="width: 40%;">Datum</th>
<th>Startar</th>
<th>Slutar</th>
<th style="width: 20%;">Aktivitet</th>
<th>Startar</th>
<th>Slutar</th>
<th style="width: 20%;">Aktivitet</th>
</tr>
</thead>
<tbody>		<tr class="row-odd">
<td><label><input type="checkbox" value="1" name="Data[0][Day]">&nbsp;måndag</label></td>
<td>
<select style="width: 75px;" class="large Time" name="Data[0][Time][0][Start]">

</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[0][Time][0][End]">

</select>
</td>
<td>
<select style="width: 100px;" class="large" name="Data[0][Time][0][Activity]">
	<option selected="selected" value="1">Träning</option>
	<option value="2">Match/Tävling/Cup</option>
</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[0][Time][1][Start]">
<option selected="selected" value="0">-</option>
</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[0][Time][1][End]">
<option selected="selected" value="0">-</option>
</select>
</td>
<td>
<select style="width: 100px;" class="large" name="Data[0][Time][1][Activity]">
	<option selected="selected" value="1">Träning</option>
	<option value="2">Match/Tävling/Cup</option>
</select>
</td>
</tr>
<tr class="row-even">
<td><label><input type="checkbox" value="2" name="Data[1][Day]">&nbsp;tisdag</label></td>
<td>
<select style="width: 75px;" class="large Time" name="Data[1][Time][0][Start]" disabled="">

</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[1][Time][0][End]" disabled="">

</select>
</td>
<td>
<select style="width: 100px;" class="large" name="Data[1][Time][0][Activity]" disabled="">
	<option selected="selected" value="1">Träning</option>
	<option value="2">Match/Tävling/Cup</option>
</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[1][Time][1][Start]" disabled="">
<option selected="selected" value="0">-</option>

</select>
</td>
<td>
<select style="width: 75px;" class="large Time" name="Data[1][Time][1][End]" disabled="">
<option selected="selected" value="0">-</option>

</select>
</td>
<td>
<select style="width: 100px;" class="large" name="Data[1][Time][1][Activity]" disabled="">
	<option selected="selected" value="1">Träning</option>
	<option value="2">Match/Tävling/Cup</option>
</select>
</td>
</tr>

</tbody>
</table>

Problemet är att det är otroligt segt, eftersom varje lista populeras varje gång man klickar på en lista. När en lista väl populeras, behöver det (såklart) inte ske igen.

Är det en bättre idé att ha EN statisk lista, som man klonar med hjälp av clone()??

Tack!

Vecka.PNG
358 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
229 ms — deklarationer (db)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)