Link to home
Start Free TrialLog in
Avatar of Al4ddin2
Al4ddin2

asked on

Logic to dynamically place members into groups

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
Avatar of Al4ddin2
Al4ddin2

ASKER

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

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

Thanks
Avatar of Scott Fell
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>

Open in new window

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
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?
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.

Thanks for your help.
Hi,

Do you require any extra info to help with this?

Thanks
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.

Thanks in advance
I have already given you the answer for this.  

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
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.
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();
        }

    });
    });
  

Open in new window

Updated html
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<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>

Open in new window

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
>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>');
            }

Open in new window


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++) {

Open in new window

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++) {

Open in new window


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
User generated imageConfuses 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.
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?
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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.