nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

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.

Find more posts tagged with

Quick Links

Comments

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]