populate multiple lists

7 posts by 2 authors in: Forums > CMS Builder
Last Post: February 22, 2013   (RSS)

Hi,

What is the name of the JavaScript drop down population system you are using? 

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By nmsinc - February 18, 2013

Hi Greg,

It's a jquery coded by interactivetools. The entire script is listed in my firsrt post!

Thanks - nmsinc

nmsinc

Hi nmsinc,

In the code on your first post you have a JavaScript function called populatePayrollList that updates when a user selects something from a drop down. Do you have the JavaScript code for that function? Is this something Jason suggested in the forum? Finally, does anything need filtered out of each drop down as the user selects something? For example, if the user selects an employees name, does anything need to be filtered out of employee group when that select list is created.

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By nmsinc - February 19, 2013

Hi Greg,

Here is the java code:

<script type = "text/javascript" src = "../cmsAdmin/3rdParty/jquery/jquery1.4.1.js"></script>

  <script type = "text/javascript">

      function populatePayrollList(company, target) {

            ajaxUrl = "populatePayrollList.php?company="+escape(company.value)+"&target="+escape(target);

            $.get(ajaxUrl, function(html){

          $('#'+target).html( html );

        });

      }

    </script>

I need to populate three lists based on the users choice of company from the “member_companies” section where field  'member_company_name' . Each user is assigned a member company, each payroll account is assigned  a member company and each contract work group is assigned a member company. When a choice is made from the company list, all three other lists must populate with only those files that match with that member company choice!

  1. List of employee names from the “accounts” section where the field ‘member_company_accounts' matches the company choice from above”.
  2. List of payroll accounting groups from the “payroll_accounts” section where the field ‘payroll_accounting_group’ matches the company choice from above.
  3. List of payroll contract groups from the “contract_work_groups” section where the field ‘assign_contract_group_id’ matches the company choice from above.

Thanks - nmsinc

nmsinc

Hi nmsinc,

Thanks for the extra info!

The easiest way to do this would be to create three separate PHP AJAX scripts that can return the options for your select drop downs in HTML format, and have a function that dynamically updates the three when someone selects something from it. So you'll need to modify the script to something like this:

 <script type = "text/javascript">

      function populateLists(member) {
            ajaxUrl = "accountsList.php?num="+escape(member.value);
            $.get(ajaxUrl, function(html){
              $('#accounts_drop').html( html );
            });
            ajaxUrl = "payrollList.php?num="+escape(member.value);
            $.get(ajaxUrl, function(html){
              $('#payroll_drop').html( html );
           });
           ajaxUrl = "contractList.php?num="+escape(member.value);
           $.get(ajaxUrl, function(html){
             $('#contract_drop').html( html );
           });
      }

    </script>

The accountsList/payrollList/contractList script PHP files will need to create what you want to appear inside the select list. You can ensure that it returns the correct options as the num value of what was selected from the member_company dropdown will be passed to the script in the URL. 

Finally you need to create the select drop downs that you want the values to appear in, and the original drop down. The code should probably look something like this:

<select name="member_company" onchange = "populateLists(this);">
 <option value="">All</option>
 <?php foreach (mysql_select("member_companies", "member_type = 'Primary' ORDER BY member_company_name") as $Primary): ?>
 <option value = "<?php echo $Primary['num'];?>"><?php echo $Primary['member_company_name'];?> - <?php echo $Primary['city'];?> <?php echo $Primary['state'];?></option>
<?php endforeach ?>
</select>
<br>
<br>


<select name="employee_name" id = "Primary">
  <option value="">Please select a company first.</option>
</select>
<br>
<br>
<select id="accounts_drop" name="accounts">
 <option value="" >Please select a company first.</option>
</select>
<br>
<br>
<select id="payroll_drop" name="payroll_accounts">
  <option value="" >Please select a company first.</option>
</select>
<br>
<br>
<select id="contract_drop" name="contract_work_groups">
  <option value="" >Please select a company first.</option>
</select>
<br>
<br>

This is just example code, so you'll need to modify it to get it working with your site.

So when a user updates member_company drop down  the JavaScript populateLists function will be triggered, and will pass the selected num value into it. Then it will use ajax to retrieve the options from the three PHP script files (which you will need to create) and will add them to each select dropdown using its ID to find it. 

Let me know if you have any questions. 

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By nmsinc - February 22, 2013

Hi Greg,

Everything worked great - thanks for the help!

nmsinc