Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JavaScript PHP
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
database
example
.editorconfig
DynamicDD.php
README.md

README.md

Dynamic Dropdown

This is a PHP class that will generate json and javascript code to read the json and translate it into 3-level dynamic dropdown where the value of dropdown 3 depend on the value of dropdown 2 and the value of dropdown 2 depend on the value of dropdown 1. This class also support default value of the dropdown

Click here for demo.

Assumptions

Following are assumptions on how we are going to use this.

  • We assume that the data is maintained by the application, not this class.
  • We assume that the dropdown is output sequencially from parent to grand children, not randomized or reverse.

Class Documentation

Overview

This class will only handle up to 3 level deep dropdown and using the db structure as described on the included sql file.

It will pull the data from mysql database, generate json object, and generate javascript code to automatically handle the on change event. This class also generate dropdown from php and handle the submission of the form.

You can change the default value of the dropdown by changing the default value from 0 to 1. Keep in mind, if there are more than 2 values are selected, the last one will takes precedent.

In the included example, "01" is the default value of "A" and "01.3" is the default value of "01". Therefore, if you select "A", then "01" and "01.3" are automatically selected. Likewise, "02.2" is the default value of "02". So if "02" is selected, "02.2" will be selected as well.

Class Documentation

Object Creation

__construct($options=array())

Accepted options. These are all optionals.

Options Accepted Value Default Value Description
'group' String 'dd' Group name of several dynamic dropdown
'prompt' String 'Please Select' Custom select message for dropdown
'custom' Array null Add any custom html attribute that will be appended to select tag
'on_parent_change' String hide State of current field on parent change. Available option: hide or none.

Data Source

The data needed should be supplied as array associative as follows.

$data = [
    'key' => [
        index => [
            'value' => 'ID',
            'title' => 'TEXT'
        ]
    ]
];

In the above example, we have 4 key that need to be set properly, which are:

Key name Description
'key' This should be the object name that represents the dropdown field.
'index' The numeric index of the data.
'value' This is the option value.
'title' This is the option text.

Following is another example of the data source used for 3 level dropdown.

$data = [
    'category' => [
        1 => [
            'value' => 'AG',
            'title' => 'AGRICULTURE, FORESTRY AND FISHING',
            'sub_category' => [
                1 => [
                    'value' => 'FRS',
                    'title' => 'Forestry and logging',
                    'type' => [
                        1 => [
                            'value' => 'SILV',
                            'title' => 'Silviculture and other forestry activities'
                        ],
                        2 => [
                            'value' => 'MINI',
                            'title' => 'Mining of hard coal'
                        ]
                    ]
                ],
                2 => [
                    'value' => 'MNG',
                    'title' => 'Mining of coal and lignite'
                ]
            ]
        ],
        2 => [
            'value' => 'MI',
            'title' => 'MINING AND QUARRYING'
        ]
    ]
];

Generate Dropdown

How To Use

To generate initial dropdown, you need to call dropdown function.

$dd = new DynamicDD();
echo $dd->dropdown(['data' => $data, 'name' => 'company[category]', 'key' => 'category']));
echo $dd->dropdown(['name' => 'company[sub_category]', 'key' => 'sub_category']);
echo $dd->dropdown(['name' => 'company[type]', 'key' => 'type']);

The API

Following is parameters available in dropdown.

DynamicDD::dropdown($params = [])
Parameters Data Type Default Description
'data' Array null Data for select options
'prompt' String 'Select option' Select prompt message for dropdown
'name' String Required HTML attribute name for dropdown
'key' String Required Key used to access data array
'id' String {$group}_{$name} HTML attribute id for dropdown
'value' String null Predefined value for dropdown

Hard Dependencies

jQuery 1.8+

Example

Single drop down

Click here for demo.

require_once "DynamicDD.php";

$dd = new DynamicDD();
echo $dd->dropdown(['data' => $data, 'name' => 'company[category]', 'key' => 'category']));
echo $dd->dropdown(['name' => 'company[sub_category]', 'key' => 'sub_category']);
echo $dd->dropdown(['name' => 'company[type]', 'key' => 'type']);

Multiple drop down

Click here for demo.

require_once "DynamicDD.php";

$dd1 = new DynamicDD(array('group'=>'1'));
echo $dd1->dropdown(['data' => $data, 'name' => 'company_1[category]', 'key' => 'category']));
echo $dd1->dropdown(['name' => 'company_1[sub_category]', 'key' => 'sub_category']);
echo $dd1->dropdown(['name' => 'company_1[type]', 'key' => 'type']);

$dd2 = new DynamicDD(array('group'=>'2'));
echo $dd2->dropdown(['data' => $data, 'name' => 'company_2[category]', 'key' => 'category']));
echo $dd2->dropdown(['name' => 'company_2[sub_category]', 'key' => 'sub_category']);
echo $dd2->dropdown(['name' => 'company_2[type]', 'key' => 'type']);

$dd3 = new DynamicDD(array('group'=>'3'));
echo $dd3->dropdown(['data' => $data, 'name' => 'company_3[category]', 'key' => 'category']));
echo $dd3->dropdown(['name' => 'company_3[sub_category]', 'key' => 'sub_category']);
echo $dd3->dropdown(['name' => 'company_3[type]', 'key' => 'type']);

Custom drop down

Click here for demo.

require_once "DynamicDD.php";

$option['group'] = 'custom';
$option['prompt'] = 'Select an option';
$option['on_parent_change'] = 'none';
$option['custom'] = ['class' => 'gloomy', 'style' => 'z-index:7;'];

$dd = new DynamicDD($option);
echo $dd->dropdown([
    'data' => $data,
    'prompt' => 'Select a category',
    'key' => 'category',
    'name' => 'company[category]',
    'id' => 'company_category',
    'value' => 'AG'
]);
echo $dd->dropdown([
    'prompt' => '',
    'key' => 'sub_category',
    'name' => 'company[sub_category]',
    'id' => 'company_sub_category',
    'value' => 'FRS'
]);

Limitation

  • Only support single children.
  • Only support single parent.
  • Only support 3 level dropdown.
  • Only support array associative for data.
  • Only support sequential output from parent, children to grandchildren.
Something went wrong with that request. Please try again.