Dynamic dropdown from JSON
Inspired by http://css-tricks.com/dynamic-dropdowns/
by levan gongadze
HTML
<select id="first-choice">http://jsfiddle.net/levigator/hegq068s/6/#embed
<option value="base">გადაზიდვის ტიპი</option>
<option value="1">სახმელეთო</option>
<option value="2">საზღვაო</option>
<option value="3">სარკინიგზო</option>
<option value="4">საჰაერო</option>
</select>
<br />
<select id="second-choice" style="visibility: hidden;">
<option>Please choose from above</option>
</select>
<select id="third-choice" style="visibility: hidden;">
<option>Please choose from above</option>
</select>
<!-- <p id="test"></p>
<p id="test1"></p>
<p id="demo"></p> -->
JavaScript
var data = {
"1": [
["5", "LTL ტვირთი"],
["6", "FTL ტვირთი"],
["7", "შიდა გადაზიდვა"]
],
"2": [
["8", "FCL კონტეინერები"],
["9", "LCL კონტეინერები"]
]
/* "3": [["8", "FCL კონტეინერები"], ["9", "LCL კონტეინერები"]] */
/* "4": [["8", "FCL კონტეინერები"], ["9", "LCL კონტეინერები"]] */
}
for (item in data) {
data[item].unshift([undefined, "Please select option"])
}
$("#first-choice").change(function() {
var first = $(this),
second = $("#second-choice"),
html = [];
$.each(data[first.val()], function(i, val) {
html.push('<option value="' + val[0] + '">' + val[1] + '</option>')
});
second.html(html.join());
second.attr("style", "visibility: hidden;");
if(data) {
alert();
second.attr("style", "visibility: visible;");
}
});
/* var data2 = {
"5": [
["10", "ტემპერატურული"],
["11", "სტანდარტული"],
["12", "პირდაპირი"]
],
"6": [
["13", "გადატვირთვით"],
["14", "ტემპერატურული"],
["15", "პირდაპირი"]
],
"8": [
["16", "FCL კონტეინერები ტემპერატურული"]
],
"9": [
["17", "LCL კონტეინერები ტემპერატურული"]
],
}
$("#second-choice").change(function() {
var first = $(this),
second = $("#third-choice"),
html = [];
$.each(data2[first.val()], function(i, val) {
html.push('<option value="' + val[0] + '">' + val[1] + '</option>')
});
second.html(html.join());
$("#third-choice").attr("style", "visibility: visible;");
}); */