Use jQuery efficiently across multiple areas - multiple select boxes affecting visible items
I'm quite new to jQuery and have this working, though I'm fairly sure if this won't be an efficient way to do this.
I have a form with each day of the week, and each day has a choice in the number of slots which then shows the correct number of slots for entry for that day.
The form:
<table border="0" cellspacing="0" cellpadding="0" class="DataTable"><tbody>
<tr>
<th>
Day
</th>
<th>
Slots
</th>
<th>
Entrys
</th>
</tr>
<tr>
<td>
Monday
</td>
<td>
<select name="frmSlots1" id="frmSlots1" title="Select the number of slots for the day">
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
</td>
<td>
Details: <input id="frmDetailsDay1Entry1" name="frmDetailsDay1Entry1" type="text" size="40" />
</div>
Details: <input id="frmDetailsDay1Entry2" name="frmDetailsDay1Entry2" type="text" size="40" />
</div>
Details: <input id="frmDetailsDay1Entry3" name="frmDetailsDay1Entry3" type="text" size="40" />
</div>
Details: <input id="frmDetailsDay1Entry4" name="frmDetailsDay1Entry4" type="text" size="40" />
</div>
</div>
</td>
</tr>
</tbody></table>
This is simplified just a little as there are more than the 1 input in an 'Entry Section' (eg .Entry3).
The jQuery I have working here is:
<script>
$(document).ready(function(){
$("#frmSlots1").change(onSelectChange);
});
function onSelectChange(){
var selected = $("#frmSlots1 option:selected");
if(selected.val() == 2){
$("#Day1 div.Entry3").slideUp('slow');
$("#Day1 div.Entry4").slideUp('slow');
}
if(selected.val() == 3){
$("#Day1 div.Entry3").slideDown('slow');
$("#Day1 div.Entry4").slideUp('slow');
}
if(selected.val() == 4){
$("#Day1 div.Entry3").slideDown('slow');
$("#Day1 div.Entry4").slideDown('slow');
}
}
</script>
That's working fine, except I do want to have 7 days so that would be quite a lot of replicated jQuery code. I am thinking there will be a way to identify the select item with the others so jQuery will know which to adjust without having to spell every single item out.
Is there an easy way to achieve this in the above?
Thanks