-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (103 loc) · 3.75 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cascading Dropdown List using JSON data - Learn infinity</title>
<!-- Bootstrap Core Css -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="css/bootstrap-select.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="css/app_style.css" rel="stylesheet" />
<style type="text/css">
.desc { display: none; }
</style>
</head>
<body>
<div class="all-content-wrapper">
<section class="container">
<div class="form-group custom-input-space has-feedback">
<div class="page-body clearfix">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<div><label><input type="radio" class="form-check-input" name="group1" value="saas"> SaaS</label></div>
<div><label><input type="radio" class="form-check-input" name="group1" value="managed"> Managed</label></div>
</div>
<div class="panel-body">
<div id="saas" class="desc">
<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" onchange="location = this.value;">
<option value="">Select Product</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Jquery Core Js -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Select Js -->
<script src="js/bootstrap-select.js"></script>
<script>
$(document).ready(function(e){
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>');
}
});
});
</script>
</body>
</html>