Solved

Dynamically set select value of drop down lists

Posted on 2013-05-17
10
373 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 52

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 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39176476
I take that back, not yet perfect
0
 
LVL 52

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 52

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 52

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 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now