Вложенные селекторы с Json данными
by yoowordpress
HTML
<select name="cat" id="cat" data-target-select="sub_cat" data-empty="Select Category" data-group="cat">
<option value="">Select category</option>
<option class="auto-locksmith" value="9959">Auto Locksmith</option>
<option class="auto-service" value="9958">Auto Service</option>
<option class="construction" value="9965">Construction</option>
<option class="fashion-beauty" value="9967">Fashion & Beauty</option>
<option class="household" value="9968">Household</option>
<option class="outdoor-contractors" value="9970">Outdoor Contractors</option>
<option class="pet-services" value="9971">Pet Services</option>
</select>
<select name="sub_cat" id="sub_cat" data-parent-select="sub_cat" data-empty="Select Subcategory" data-group="cat" disabled>
<option>Select Subcategory</option>
</select>
<hr>
<select name="country" id="country" data-target-select="state" data-empty="Select Country" data-group="location">
<option value="">Select Country</option>
<option class="afghanistan" value="1">Afghanistan</option>
<option class="albania" value="2">Albania</option>
<option class="armenia" value="10">Armenia</option>
<option class="united-states" value="222">United States</option>
</select>
<select name="state" id="state" data-target-select="city" data-parent-select="state" data-empty="Select State" data-group="location" disabled>
<option>Select State</option>
</select>
<select name="city" id="city" data-parent-select="city" data-empty="Select City" data-group="location" disabled>
<option>Select City</option>
</select>
JavaScript
var CompanyFilter = {
"9959": {
"name": "Auto Locksmith"
},
"9958": {
"name": "Auto Service",
"sub_cat": {
"9959": {
"name": "Auto Locksmith"
},
"9960": {
"name": "Auto Repair Services"
}
}
},
"9965": {
"name": "Construction",
"sub_cat": {
"9985": {
"name": "Drain Cleaning"
},
"9993": {
"name": "General Contractors"
}
}
},
"9967": {
"name": "Fashion & Beauty",
"sub_cat": {
"10040": {
"name": "Barbers"
},
"10045": {
"name": "Fashion Design"
}
}
},
"9968": {
"name": "Household",
"sub_cat": {
"10080": {
"name": "Moving"
}
}
},
"9970": {
"name": "Outdoor Contractors",
"sub_cat": {
"10110": {
"name": "Gardening"
},
"10111": {
"name": "Gutter Cleaning"
},
"10114": {
"name": "Landscaping"
}
}
},
"9971": {
"name": "Pet Services",
"sub_cat": {
"10132": {
"name": "Pet Daycare & Boarding"
}
}
},
"1": {
"name": "Afghanistan",
"sub_cat": {
"11": {
"name": "Helmand",
"sub_cat": {
"14": {
"name": "Lashkar Gah"
}
}
},
"19": {
"name": "Kunduz",
"sub_cat": {
"23": {
"name": "Kondoz"
}
}
}
}
},
"2": {
"name": "Albania",
"sub_cat": {
"35": {
"name": "Berat",
"sub_cat": {
"43": {
"name": "Corovode"
}
}
}
}
},
"10": {
"name": "Armenia",
"sub_cat": {
"153": {
"name": "Shirak",
"sub_cat": {
"348": {
"name": "Gyumri"
}
}
},
"157": {
"name": "Yerevan",
"sub_cat": {
"353": {
"name": "Yerevan"
}
...