Dynamic Drop Downs

IamtheWalrus

I have a drop down that holds a number from 0-8. It is used to allow a user to select the number of children they have. When the user selects, say 4, 4 drop downs appear below the child number drop down. They appear in banks of 2. So if I select 8, I get 4 rows of 2. If I select 3, I get 2 rows but the second row will only have 1 drop down.

If the user selects 4, I get 2 rows x 2. If the user then selects, 5, I want another drop down to appear - the values in the first 4 must remain.

Can anyone suggest a way of implementing this? I am able to make the initial selection work but not the adding more scenario above.

I'm using jQuery, Javascript and HTML.

IamtheWalrus

Please?

oscarBravo

If you select a number of children that's greater than the number shown, then you just need to add more dropdowns in the same way you added the initial number - so if you initially selected (say) 3, you initially added three dropdowns dynamically to the DOM; so if you now select (say) 5, you dynamically add two more.

Of course, you also need to deal with the possibility of selecting a smaller number, and having to remove the last n dropdowns, but that's a similar process.

Given that you've already figured out how to add the initial dropdowns, where are you getting stuck adding more?

ChRoMe

IamtheWalrus wrote: »

Please?

Posting some code would be a good start to be honest.

IamtheWalrus

I will post some code later when I've it tidied up but for now my issue is as follows:

I have done what oscarBravo has suggested. The issue is when the user adds say 3 drop downs (they're printed), then adds 5 (adding 2 to the existing 3). My plan is to iterate through the existing 3 and only start printing to the screen from 4 onwards. BUT I don't know how to get a hold of the existing html (that has 3 drop downs in it). I need a handle on this HTML to be able to check what's already been printed, using the method below:

[HTML]function doesExists(element) {
if ($('.' + element).length > 0) {
return true;
}
return false;
}[/HTML]

IamtheWalrus

[HTML]function addChildAgesvv(row, roomNumber, childageArr) {
var roomCount = roomNumber;
var childCount = selectedValue(row);
if (childCount == 0) {
for ( var i = 1; i <= 8; i++) {
deleteChildRoom('childRoomAgeRow_' + roomCount + '_' + i); //TODO: fix this
}
} else if (childCount > 0) {
var new_row = '';
var rowCounter = 1;

for ( var i = 1; i <= childCount; i++) {
var rowNumber = getTableRowForChildCount(i);

if(doesExists('childRoomAgeRow_' + roomCount + "_" + rowNumber) ||
new_row.indexOf('childRoomAgeRow_' + roomCount + "_" + rowNumber)>=0) {

if(!doesExists('childRoomAge_' + roomCount + "_" + rowNumber + "_2") ||
new_row.indexOf('childRoomAge_' + roomCount + "_" + rowNumber + "_2")<0) {
new_row+=appendToExistingRow(roomCount, rowCounter++) ;
}
}else{
new_row+=newRow(roomCount, i) ;
}
}
$(".roomChoice_" + roomCount).after(new_row);
}

return false;
}[/HTML]

[HTML]function newRow(roomCount, rowCounter) {
var rowIndex = roomCount + '_' + rowCounter;

var newRow = '<tr class="childRoomAgeRow_' + rowIndex + '">'
+'<td colspan="2" align="right">' + gChildAge + '</td>'
+ '<td class="childRoomAge_' + rowIndex + '_1" >'
+ '<select class="childRoom_' + rowIndex + '_1"' + '></select>'
+'</td>';

return newRow;
}[/HTML]

[HTML]function appendToExistingRow(roomCount, rowCounter) {
var rowIndex = roomCount + '_' + rowCounter + '_2';

var appendedRow = '<td class="childRoomAge_' + rowIndex + '" >'
+ '<select class="childRoom_' + rowIndex + '"' + '></select>'
+'</td>';

return appendedRow;
}[/HTML]

[HTML]function deleteChildRoom(element) {
if (doesExists(element)) {
$("." + element).remove();
}
return false;
}[/HTML]

[HTML]function getTableRowForChildCount(childCount){
var tableRow;

if(childCount>6){
tableRow = 4;
} else if(childCount>4) {
tableRow = 3;
} else if(childCount>2) {
tableRow = 2;
} else{
tableRow = 1;
}

return tableRow;
}[/HTML]

IamtheWalrus

I can explain it if you want but hopefully it's explanatory.

IamtheWalrus

I'm ready to take questions.

IamtheWalrus

I figured it out.

[HTML]function addChildAges(row, rowNumber, childageArr) {
var counter = rowNumber;
var val = selectedValue(row);
if (val == 0) {
deleteChildRoom('childRoomAgeRow_' + rowNumber);// Deleting the complete Child Ages row when one element exists
} else if (val > 0) {
// check if the Child Room exists .
if (!doesExists('childRoomAgeRow_' + counter)) {
var new_row = '';
for ( var i = 1; i <= val; i++) {
var addnewrow = (i%2==1);
var showlabel = (i==1);
new_row += (addnewrow ? newRow(counter, showlabel) : '') + addChildAgesDropDown(counter + "_" + i);// passing number child rooms to be created
}
$(".roomChoice_" + counter).after(new_row);
for ( var i = 1; i <= val; i++) {
buildSelectionJQuery(" |2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18","00|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18",childageArr==null?null:childageArr[i-1],true,"childRoom_" + counter + "_" + i);
}
} else {
for ( var a = 1; a <= val; a++) {
if (!doesExists('childRoomAge_' + counter + "_" + a)) {
var addnewrow = (a%2==1);
var showlabel = (a==1);
// check if the room two needs to be created
if (addnewrow) {
var new_child_room = newRow(counter, showlabel) + addChildAgesDropDown(counter + "_" + a);
$(".childRoomAgeRow_" + counter + ":last").after(new_child_room); // Creating the next child record on a new row
} else {
var new_child_room = addChildAgesDropDown(counter + "_" + a);
$(".childRoomAgeRow_" + counter + ":last").append(new_child_room); // Creating the next child record in the same row
}
buildSelectionJQuery(" |2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18","00|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18",0,true,"childRoom_" + counter + "_" + a);
}
} // a for add
for ( var d = 8; d > val; d--) {
if (doesExists('childRoomAge_' + counter + "_" + d)) {
var deleterow = (d%2==1);
if (deleterow) {
$('.childRoomAge_' + counter + "_" + d).parent().remove();
} else {
deleteChildRoom('childRoomAge_' + counter + "_" + d);
}
}
} // d for delete
}
}
return false;
}

function newRow(counter, showlabel) {
return '<tr class="childRoomAgeRow_' + counter + '">'
+'<td colspan="2" align="right">' + (showlabel?gChildAge:' ') + '</td>';
}[/HTML]