Learn Infinity

Learn Some Thing New

Cascading Dropdown List using JSON Data

Cascading Dropdown List using JSON Data

In this post, I show you how to create a cascading dropdown list with JSON datasets. The relevant list fields will load the data list with help of dependent selected list value. The dependent selected list are filed with the help of chosen data without a refresh of the page.

Here we need to create JSON file to set the data select list box and in this file, we have to provide the connection between dataset with relevant dataset unique id value.

What is JSON?

JSON represents JavaScript Object Notation and is a way to save data in an associated, easy-to-use practice. It provides us a human-readable set of data that we can use in a really logical practice. Inside JSON object, we can set any number of keys using a “key_name”: “key_value” pairing, separated by commas.

1
2
3
4
5
$json_list = [{
"key_name1" : "key_value1",
        "key_name2" : "key_value2",
        "key_name3" : "key_value3"
}];

Step 1: Create a Form with required Select List box fields.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form action="" method="POST">
<div class="form-group">
<label for="" class="required" >Brand :</label>
<select name="brand" id="brand" class="form-control">
<option value="">Select Brand</option>
</select>
</div>
 
<div class="form-group">
<label for="" class="required" >Category :</label>
<select name="category" id="category" class="form-control">
<option value="">Select Category</option>
</select>
</div>
 
<div class="form-group">
<label for="" class="required" >Product :</label>
<select name="product" id="product" class="form-control">
<option value="">Select Product</option>
</select>
</div>
</form>

Step 2: jQuery function

Define an ajax function to get the JSON dataset and load it in the specific select list box with help of unique tag id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function get_json_data(id, parent_id) {
    var html_code = '';
    $.getJSON('json_list.json', function(data) {
     ListName = id.substr(0, 1).toUpperCase() + id.substr(1);
        html_code += '<option value="">Select ' + ListName + '</option>';
        $.each(data, function(key, value) {
            if (value.parent_id == parent_id) {
                html_code += '<option value="' + value.id + '">' + value.name + '</option>';
            }
        });
        $('#' + id).html(html_code);
    });
 
}
get_json_data('brand',0);
 
$(document).on('change', '#brand', function() {
    var brand_id = $(this).val();
    if (brand_id != '') {
        get_json_data('category', brand_id);
    } else {
        $('#category').html('<option value="">Select category</option>');
    }
    $('#product').html('<option value="">Select Product</option>');
});
 
$(document).on('change', '#category', function() {
    var category_id = $(this).val();
    if (category_id != '') {
        get_json_data('product', category_id);
    } else {
        $('#product').html('<option value="">Select Variant</option>');
    }
});

Step 3: Define JSON dataset

Define a JSON dataset with key name and key value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
[  
   {  
      "id":"1",
      "name":"Samsung",
      "parent_id":"0"
   },
   {  
      "id":"2",
      "name":"Sony",
      "parent_id":"0"
   },
   {  
      "id":"3",
      "name":"Apple",
      "parent_id":"0"
   },
 
 
   {  
      "id":"4",
      "name":"Mobiles & Accessories",
      "parent_id":"1"
   },
   {  
      "id":"5",
      "name":"Home & Kitchen",
      "parent_id":"1"
   },
 
 
 
   {  
      "id":"6",
      "name":"Computers",
      "parent_id":"2"
   },
   {  
      "id":"7",
      "name":"Home Entertainment",
      "parent_id":"2"
   },
 
 
 
   {  
      "id":"8",
      "name":"Phone",
      "parent_id":"3"
   },
 
 
 
   {  
      "id":"9",
      "name":"Mobiles",
      "parent_id":"4"
   },
   {  
      "id":"10",
      "name":"Tablets",
      "parent_id":"4"
   },
   {  
      "id":"11",
      "name":"Mobile Headsets",
      "parent_id":"4"
   },
 
 
 
   {  
      "id":"12",
      "name":"Refrigerators",
      "parent_id":"5"
   },
   {  
      "id":"13",
      "name":"Air Conditioners",
      "parent_id":"5"
   },
 
 
 
   {  
      "id":"14",
      "name":"Pen Drives",
      "parent_id":"6"
   },
   {  
      "id":"15",
      "name":"Laptops",
      "parent_id":"6"
   },
 
 
   {  
      "id":"16",
      "name":"TVs",
      "parent_id":"7"
   },
   {  
      "id":"17",
      "name":"Home Theaters",
      "parent_id":"7"
   },
   {  
      "id":"18",
      "name":"Speakers",
      "parent_id":"7"
   },
 
   {  
      "id":"19",
      "name":"Iphone 5",
      "parent_id":"8"
   },
   {  
      "id":"20",
      "name":"Iphone 6",
      "parent_id":"8"
   },
   {  
      "id":"21",
      "name":"Iphone 7",
      "parent_id":"8"
   }
 
 
]

Download   Demo

Prev post Server Side Processing DataTable with PHP and MySQL
Next post Secure Form Data Submission And Handling with Google ReCaptcha

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Related Posts

Leave a Reply

Your email address will not be published.

Back to top