May 21, 2017
Ajax & jQuery – Cascading DropDownList using JSON
Hi, friends in this post I show you how to make Ajax & jQuery cascading DropDownList using JSON. The subordinate select box will be a needed functionality if there is a dependency between options of the select box lists. Subordinate drop-down list box when we have select in parent select box then it will allow to refresh child select box data without a refresh of the web page. In this post, we have used JSON to store the data for fill parent and child select box and in that file, we have to give the link between parent data with child. We will use Ajax jQuery for fetch data from JSON and filled parent select box.
index.php
|
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 |
<!doctype html> <html> <head> <title>SoftAOX | Ajax & jQuery - Cascading DropDownList using JSON</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <br/> <div class="container"> <h1 align="center">Ajax & jQuery - Cascading DropDownList using JSON</h1> <br /> <select name="car" id="car" class="form-control input-md"> <option value="">Select Car</option> </select> <br /> <select name="model" id="model" class="form-control input-md"> <option value="">Select Model</option> </select> <br /> <select name="variant" id="variant" class="form-control input-md"> <option value="">Select Variant</option> </select> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { load_json_data('car'); function load_json_data(id, parent_id) { var html_code = ''; $.getJSON('car_list.json', function(data) { html_code += '<option value="">Select ' + id + '</option>'; $.each(data, function(key, value) { if (id == 'car') { if (value.parent_id == '0') { html_code += '<option value="' + value.id + '">' + value.name + '</option>'; } } else { if (value.parent_id == parent_id) { html_code += '<option value="' + value.id + '">' + value.name + '</option>'; } } }); $('#' + id).html(html_code); }); } $(document).on('change', '#car', function() { var car_id = $(this).val(); if (car_id != '') { load_json_data('model', car_id); } else { $('#model').html('<option value="">Select Model</option>'); } $('#variant').html('<option value="">Select Variant</option>'); }); $(document).on('change', '#model', function() { var model_id = $(this).val(); if (model_id != '') { load_json_data('variant', model_id); } else { $('#variant').html('<option value="">Select Variant</option>'); } }); }); </script> </body> </html> |
car_list.json
|
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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 |
[ { "id":"1", "name":"BMW", "parent_id":"0" }, { "id":"2", "name":"Ford", "parent_id":"0" }, { "id":"3", "name":"Jaguar", "parent_id":"0" }, { "id":"4", "name":"Land Rover", "parent_id":"0" }, { "id":"5", "name":"BMW i8", "parent_id":"1" }, { "id":"6", "name":"BMW 7 Series", "parent_id":"1" }, { "id":"7", "name":"BMW 5 Series", "parent_id":"1" }, { "id":"8", "name":"BMW M5", "parent_id":"1" }, { "id":"9", "name":"Ford Mustang", "parent_id":"2" }, { "id":"10", "name":"Ford Endeavour", "parent_id":"2" }, { "id":"11", "name":"Ford Fiesta", "parent_id":"2" }, { "id":"12", "name":"Jaguar XF", "parent_id":"3" }, { "id":"13", "name":"Jaguar XJ", "parent_id":"3" }, { "id":"14", "name":"Land Rover Range Rover", "parent_id":"4" }, { "id":"15", "name":"Land Rover Range Rover Evoque", "parent_id":"4" }, { "id":"16", "name":"BMW i8", "parent_id":"5" }, { "id":"17", "name":"740Li DPE Signature", "parent_id":"6" }, { "id":"18", "name":"750Li Design Pure Excellence (CBU)", "parent_id":"6" }, { "id":"19", "name":"750Li M Sport (CBU)", "parent_id":"6" }, { "id":"20", "name":"520d M Sport", "parent_id":"7" }, { "id":"21", "name":"520i Luxury Line", "parent_id":"7" }, { "id":"22", "name":"M3 Sedan", "parent_id":"8" }, { "id":"23", "name":"Coupe", "parent_id":"8" }, { "id":"24", "name":"V8", "parent_id":"9" }, { "id":"25", "name":"3.2L 4x4 AT Titanium", "parent_id":"10" }, { "id":"26", "name":"2.2 Trend MT 4X2", "parent_id":"10" }, { "id":"27", "name":"2.2L 4x2 AT Trend", "parent_id":"10" }, { "id":"28", "name":"Titanium", "parent_id":"11" }, { "id":"29", "name":"Ambiente", "parent_id":"11" }, { "id":"30", "name":"Pure", "parent_id":"12" }, { "id":"31", "name":"Prestige Petrol", "parent_id":"12" }, { "id":"32", "name":"Prestige", "parent_id":"12" }, { "id":"33", "name":"3.0 L (D) Portfolio", "parent_id":"13" }, { "id":"34", "name":"3.0 L (D) Premium Luxury", "parent_id":"13" }, { "id":"35", "name":"3.0L TDV6 Vogue", "parent_id":"14" }, { "id":"36", "name":"4.4 SDV8 Vogue SE (D)", "parent_id":"14" }, { "id":"37", "name":"LWB 5.0L V8", "parent_id":"14" }, { "id":"38", "name":"2.0 TD4 HSE", "parent_id":"15" }, { "id":"39", "name":"2.0 TD4 Pure", "parent_id":"15" }, { "id":"40", "name":"2.0 Si4 SE", "parent_id":"15" } ] |
