Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Dynamically set select value of drop down lists

Posted on 2013-05-17
10
Medium Priority
?
407 Views
Last Modified: 2013-05-20
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
0
Comment
Question by:Al4ddin2
  • 7
  • 3
10 Comments
 

Author Comment

by:Al4ddin2
ID: 39175421
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39176473
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

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39176476
I take that back, not yet perfect
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39176489
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

0
 

Author Comment

by:Al4ddin2
ID: 39179574
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.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39179656
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

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39179778
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

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39179798
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

0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39179836
Everything worked except the combination of 4 groups and 5 members so this is the fix

http://jsbin.com/episep/30/

$(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) {
              console.log('row='+row +' members='+members+' groups='+groups);
              
              if( members == 5 && groups == 4 && row == 2){
                z=1;
                console.log('a1');
              }
              else{
                z = max_num;
          console.log('a2 '+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

0
 

Author Comment

by:Al4ddin2
ID: 39180250
Sensational. Thank you for all of your assistance.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question