asked on

Dynamically set select value of drop down lists

Hi,

I have the current script that allows the user to select a number of groups and a number of members and then displays the relevant number of s_groups drop downs depending on what was selected in SELECT ID 'groups'.
What I need to happen is to then when a user selects a number of members, it then allocates them evenly across the s_groups drop downs.

http://jsbin.com/episep/21

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.

Thanks

Al4ddin2

ASKER

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.

Scott Fell

Ok dude... "In perfect cursive" ~Billy Madison http://jsbin.com/episep/23/edit

It helped for me to write out the question. I just did not have time to get to it during the day.

js

$(document).ready(function () {



    $("#members").chained("#groups");

    var paxCount = 4;
    $('#members').append('<option value="0">Select Members</option>');
    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;
        }

        $('#members').append('<option value="0">Select Members</option>');

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



    });

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


    $('#members').change(function () {

        var groups = $('#groups').val();
        var members = $('#members').val();
        var max_num = Math.ceil(members / groups);
        var r = members % groups;




        for (i = 1; i <= max_num; i++) {
            if (i < max_num) {
                z = max_num;
            } else if (r !== 0) {
                z = max_num - 1;

            } else {
                z = max_num;
            }

            console.log(z);
            $('select#s_groups' + i).val(z);
        }

    });

});

Open in new window

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="0">Select Groups</option>
    <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">
       <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
  </div>
  <br />
  <div id="groups2" class="stuff" style="display:none">
    <label for="s_groups2" >Group 2</label>
    <select id="s_groups2">
      <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
  </div>
  <br />
  <div id="groups3" class="stuff" style="display:none">
    <label for="s_groups3" >Group 3</label>
    <select id="s_groups3">
      <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
  </div>
  <br />
  <div id="groups4" class="stuff" style="display:none">
    <label for="s_groups4" >G
      roup 4</label>
    <select id="s_groups4">
      <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
  </div>
  </div> 
</body>
</html>

Open in new window

Scott Fell

I take that back, not yet perfect

Scott Fell

Now good http://jsbin.com/episep/25/edit

updated js

$(document).ready(function () {



    $("#members").chained("#groups");

    var paxCount = 4;
    $('#members').append('<option value="0">Select Members</option>');
    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;
        }

        $('#members').append('<option value="0">Select Members</option>');

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



    });

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


    $('#members').change(function () {

        var groups = $('#groups').val();
        var members = $('#members').val();
        var max_num = Math.ceil(members / groups);
        var r = members % groups;




        for (i = 1; i <= groups; i++) {
            if (i < max_num) {
                z = max_num;
            } else if (r !== 0) {
                z = max_num - 1;

            } else {
                z = max_num;
            }

            console.log(z);
            $('select#s_groups' + i).val(z);
        }

    });

});

Open in new window

Al4ddin2

ASKER

Hi Padas,

This is great, I think we're almost there :-)
However, the formula doesn't always seem to work...

for example, If I select 4 groups and 13 members the total in the s_groups drop down lists equals 15. Same if I select groups = 2 and members = 7 the s_groups total = 8.

Thank you for your continued help.

Scott Fell

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

Updated js

$(document).ready(function () {



    $("#members").chained("#groups");

    var paxCount = 4;
    $('#members').append('<option value="0">Select Members</option>');
    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;
        }

        $('#members').append('<option value="0">Select Members</option>');

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



    });

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


    $('#members').change(function () {

        var groups = $('#groups').val();
        var members = $('#members').val();
        var max_num = Math.ceil(members / groups);
        var r = members % groups;
        var r2 = 0;



        for (i3 = 1; i3 <= groups; i3++) {
          r2=r2+max_num;
            if (i3 < max_num) {
                z = max_num;
            } else if (r !== 0) {
                z = r;

            } else {
                z = max_num;
            }

          
            $('select#s_groups' + i3).val(z);
        }

    });

});

Open in new window

Scott Fell

I think this is the final winner..
http://jsbin.com/episep/27/

$(document).ready(function () {



    $("#members").chained("#groups");

    var paxCount = 4;
    $('#members').append('<option value="0">Select Members</option>');
    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;
        }

        $('#members').append('<option value="0">Select Members</option>');

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



    });

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


    $('#members').change(function () {

        var groups = $('#groups').val();
        var members = $('#members').val();
        var max_num = Math.ceil(members / groups);
        var r = members % groups;
        var r2 = 0;

console.log('r '+r+' max num '+ max_num);

        for (i3 = 1; i3 <= groups; i3++) {
          r2=r2+max_num;
          
            if (r2 < members) {
                z = max_num;
          
            } else if (r2 > members) {
                z = members-(r2-max_num);
             
            } else {
                z = max_num;
             
            }

          
            $('select#s_groups' + i3).val(z);
        }

    });

});

Open in new window

Scott Fell

forget that last one... this is better
http://jsbin.com/episep/29/

$(document).ready(function () {



    $("#members").chained("#groups");

    var paxCount = 4;
    $('#members').append('<option value="0">Select Members</option>');
    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;
        }

        $('#members').append('<option value="0">Select Members</option>');

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



    });

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


    $('#members').change(function () {

        var groups = $('#groups').val();
        var members = $('#members').val();
        var max_num = Math.ceil(members / groups);
        var r = members % groups;
        var r2 = 0;
        var row = 0; 
console.log('r '+r+' max num '+ max_num);

        for (i3 = 1; i3 <= groups; i3++) {
          r2=r2+max_num;
          row=row+1;
          
            if (r2 < members) {
                z = max_num;
          console.log('a '+z);
            } else if (r2 > members) {
                z = members-(r2-max_num);
            console.log('b '+z);  
            } else {
              if(row != groups){
                z=max_num - 1;
              }else{
                z = max_num;
             console.log('c '+z); 
              }
            }

          
            $('select#s_groups' + i3).val(z);
        }

    });

});

Open in new window

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Al4ddin2

ASKER

Sensational. Thank you for all of your assistance.