Solved

# Logic to dynamically place members into groups

Posted on 2013-05-13
204 Views
I have the following code: http://jsbin.com/episep/8/

I would like to, once the group number and number of members has been selected, to show the relevant number of Group{n} drop down lists and logically assign the correct number of members to each group.
Each group can have up to 4 members.

e.g. If groups selected value = 3 and members selected value = 4
Then Group1, Group2 and Group3 drop down lists are shown and populated with 2,1,1 respectively.

There will be a validation in place to ensure that members > groups.

Thanks
0
Question by:Al4ddin2
• 9
• 7

Author Comment

ID: 39161071
This is what I am hoping to achieve (static HTML)

http://jsbin.com/episep/14/

Thanks
0

LVL 52

Expert Comment

ID: 39162021
If the select ID="groups" were set to 4, then you would see groups 1 through 4 and  if select id="groups" were set to 2 then you would see groups 1 through 2?

Are the select options  inside the groups div's (below) tied to anything for the purpose of this question?

`````` <div id="groups3" class="stuff" style="display:block">
<label for="groups3" >Group 3</label>
<select id="groups3">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
</div>
``````
0

Author Comment

ID: 39163840
Hi,

Yes that is correct. If select ID=groups is set to four then groups 1-4 will be shown.

The contents of the groups1-4 will then be determined (built dynamically) based on the selected value of select ID=members

So this is how it would look if the user selected 2 groups and 5 members.
http://jsbin.com/episep/16/

Thanks
0

LVL 52

Expert Comment

ID: 39163885
Does the jquery we are building here need to worry about the value options for group one and two?  If so, how do you determine to use a max value of 3 and 2 vs 1 and 4 or 2 and 3 or 3 and 2 or 4 and 1?
0

Author Comment

ID: 39163897
Ah yes good point, therefore the option list values for each Group1-4 select box should range to 4 if necessary to allow the user, once the option lists are shown to then amend them as necessary.

0

Author Comment

ID: 39167443
Hi,

Do you require any extra info to help with this?

Thanks
0

Author Comment

ID: 39170947
Hi, sorry can anyone help with this please?
Really need to get this issue solved soon.

Here is a working example of something like what I need

http://www.booking.com/

Here in there search widget they apply the logic i need to there room selection.

0

LVL 52

Expert Comment

ID: 39171461

When you change option group one, it dictates what is on option group two and determines which div to show.

http://jsbin.com/episep/12/edit

The jquery logic is there, you just need to update html/css logic
0

Author Comment

ID: 39171508
Hi,

Sorry, but this isn't what I need?! I'm not sure what else I can say to make it clear?

If select ID 'groups' = 4 then select ID 'group1', 'group2', 'group3' AND 'group4' are all displayed.
The selected values of these select boxes is then worked out depending on the value of the select ID 'members'.

So if the user selected 'groups' = 4 and members = '12'
Then the 4 group select drop downs should all be displayed and their selected values should be as follows:
group1 = 3
group2 = 3
group3 = 3
group4 = 3

Meaning that all 12 members have been allocated to each of the 4 groups they selected automatically.

As far as I can see, all your example does it display the single group select ID for the number of groups selected - that isn't what I need.
0

LVL 52

Expert Comment

ID: 39172005
Here is the same answer with a little extra  http://jsbin.com/episep/18/  Please note the updated html.  You can't have multiple objects with the same id.
``````\$(document).ready(function () {
\$("#members").chained("#groups");

var paxCount = 4;

for (i = 1; i < paxCount + 1; i++) {
\$('#members').append('<option value="' + i + '">' + i + '</option>');
}

\$('#groups').change(function () {

\$('#members' + ' option').remove();
var roomCount = \$('#groups').val();

if (roomCount == '1') {
paxCount = 4;
} else if (roomCount == '2') {
paxCount = 8;
} else if (roomCount == '3') {
paxCount = 12;
} else if (roomCount == '4') {
paxCount = 16;
}

for (i = 1; i < paxCount + 1; i++) {
\$('#members').append('<option value="' + i + '">' + i + '</option>');
}

if (paxCount == '4' && roomCount == '2') {
//\$(target + '2').show();
}

});

\$('#groups').change(function () {
\$('.stuff').hide();
var x = \$(this).val();
for (var i2 = 0; i2 < x; i2++) {
var g = i2 + 1;
var id_name = '#groups' + g;

for (i3 = 1; i3 <= x; i3++) {
s_group = '#s_groups' + g;
console.log(s_group);
\$(s_group).append('<option value="' + i3 + '">' + i3 + '</option>');
}
\$(id_name).show();
}

});
});

``````
Updated html
``````<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="https://raw.github.com/tuupola/jquery_chained/master/jquery.chained.min.js"></script>
<script>

</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<body>
<select id="groups" name="groups">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<select id="members" name="members">
</select>

<br />
<div id="info">
<div id="groups1" class="stuff" style="display:none">
<label for="s_groups1" >Group 1</label>
<select id="s_groups1">
</select>
</div>
<br />
<div id="groups2" class="stuff" style="display:none">
<label for="s_groups2" >Group 2</label>
<select id="s_groups2">
</select>
</div>
<br />
<div id="groups3" class="stuff" style="display:none">
<label for="s_groups3" >Group 3</label>
<select id="s_groups3">
</select>
</div>
<br />
<div id="groups4" class="stuff" style="display:none">
<label for="s_groups4" >Group 4</label>
<select id="s_groups4">
</select>
</div>
</div>
</body>
</html>
``````
0

Author Comment

ID: 39172040
This still doesn't work for me??

The s_groups1, s_groups2, s_groups3, s_groups4 when displayed are always showing a selected value of 1.

This is a static HTML version of what I am asking for if a user has selected the value 3 from the groups option list and 8 from the members options list.

http://jsbin.com/episep/20/

It pre-selects the values for each of the s_groups options lists based on the number of members.

I do appreciate the time you are taking and all the help you are providing but I'm not sure if you understand exactly what I need...

Is there a way I can help to clarify anything? I've provided a link to a website that is using what I need, a static HTML example of how I need it to look... let me know
0

LVL 52

Expert Comment

ID: 39172225
>It pre-selects the values for each of the s_groups options lists based on the number of members.

Just play with this part of the code to adjust the number of options and preselect.
``````for (i3 = 1; i3 <= x; i3++) {
s_group = '#s_groups' + g;
console.log(s_group);
\$(s_group).append('<option value="' + i3 + '">' + i3 + '</option>');
}
``````

Your sample makes no sense. I don't know how you expect the javascript to know the option pre selected values are 2,3,1 combination when the 2 original selects are a 2 and 8.

If I have it wrong where the sub groups are only supposed to have 4 options no matter what the first option has been selected then just modify this code
``````for (i3 = 1; i3 <= x; i3++) {
``````
and replace the x with a 4 and each will have only 4 choices.  If it is supposed to be x + 1 then declare a new variable on the line before that ads 1 to the current x and then use that variable.
``````y=x+1
for (i3 = 1; i3 <= y; i3++) {
``````

As of now, you have
+ A chained select for Members based on Groups.

+ The number of sub groups (s_group) lights up based on the option choice of Groups.

+ The  s_group option values info is added based on the choice of Groups and I have shown you how to make that a static number

- You will need to determine how to make each s_group 'selected' and update my most recent version.  Because this
Confuses me as to how you determine the preselect from what is given here.  I can see it all totals to eight but there is no way to determine which combination to use to total 8. I think that will be fodder for another question.
0

Author Comment

ID: 39174097
Hi,

s_groups option values will always range 1-4 so these do not need to be dynamically built (as your current example doesn't work and keeps appending values each time the groups drop down is changed)
The only functionality I am asking for, is what hasn't been provided in the selecting of the s_groups values based on the number of members selected.

So what I need is for a script to iterate through the number of members selected and (correct me if i'm wrong as I don't know how to do it, hence the question on here) create an array for each group and as it loops through the number of members it incrementally assigns one to each group.

array1, array2, array3 (number of arrays based on number of groups selected)

if members = 8 and groups = 3 then
array1 + 1
array2 + 1
array3 + 1
array1 + 1
array2 + 1
array3 + 1
array1 + 1
array2 + 1

array1 length = selected value for s_groups1
array2 length = selected value for s_groups2
array3 length = selected value for s_groups3

I don't need to consider the different options for making up that combination of groups and members - the users can amend these afterwards if need be.

Does this make sense?
0

LVL 52

Accepted Solution

Scott Fell,  EE MVE earned 500 total points
ID: 39175203
The sub groups are now static http://jsbin.com/episep/21/

I would suggest closing this question out and starting a new one to build the formula you need.
0

Author Comment

ID: 39175235
Hi,

I will close this group and allocate the points to you for all the time you have offered.
I am no closer to solving this issue though and am hoping that raising a new ticket won't force me to go through the same steps with someone again.

Is this really a difficult request?

Thanks
0

LVL 52

Expert Comment

ID: 39175332
90% of the answer comes from the question. Honestly it was difficult to understand what you wanted from your question.

Another way explain what you want to do might be:

I have two select options, groups and  members.  There are 4 groups and the number of options for members is determined by the group.  I have this part figured out.

Once the groups and members are selected, I have sub groups  that will display.  Each sub group has 4 options (1 through 4).

My goal is to preselect each sub group based on the groups and members selected.

The total of all selected subgroups should equal the amount of members.

As example, if somebody selects 3 groups and 8 members, there will be 3 sub groups that display.  I need each sub group to be preselected.  The first 2 will select option 3 and the third will select option 2 (3+3+2=8).  The formula to figure this out is:

groups=3
members=8
x=math.ceil(8/3)  // 3
z=0

z=z+x   //3
s_group1 selected for value x // this will be 3

z=z+x   //6
if (z > members) {x=x-1}
s_group2 selected for value x// 3

z=z+x  // 9
if (z > members) {x=x-1}  //8
s_group3 selected for value x // because z would be 9 so we need to set x to 2

My current working sample is http://jsbin.com/episep/21/  If you select the first option to 3 for instance, you will see 3 new drop downs show up.  These need to be pre selected based on my formula.
0

## Featured Post

### Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are aâ€¦
Introduction Chart.js, used properly, can visually add a difference to your charting applications.Â It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For thisâ€¦
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)