"Notification Adding Form With Cascading List in Bootsrap"
Bootstrap 4.1.1 Snippet by kozhinhikkodan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css"> <script src="http://14.139.184.228/mis/plugins/jquery/dist/jquery.js"></script> <script src="http://14.139.184.228/mis//plugins/bootstrap/dist/js/bootstrap.min.js"></script> <div class="col-md-12"> <div class="box box-primary"> <form id="" action="<?= base_url() ?>admin/new_notification" method="post"> <div class="box-body"> <!-- text input --> <div class="row form-group"> <span class="text-danger" style="margin-left: 1%;"><b>*</b> All Fields are Mandatory</span> </div> <div class="row"> <div class="form-group col-md-6"> <input type="text" class="form-control" placeholder="Title ( No longer than 25 words )" name="title" required> </div> <div class="form-group col-md-2"> <select class="form-control " name="list1" id="countySel" required> <option value="" disabled selected hidden>Student/Faculty</option> </select> </div> <div class="form-group col-md-2"> <select class="form-control " name="list2" id="stateSel" required> <option value="" disabled selected hidden>Year/Permanant or Adhoc</option> </select> </div> <div class="form-group col-md-2"> <select class="form-control " name="list3" id="districtSel" required> <option value="" disabled selected hidden>Branch/list</option> </select> </div> <div class="form-group col-md-12"> <textarea type="text" height="175px" class="form-control" placeholder="Description ( No longer than 100 words )" name="description" required></textarea> </div> </div> </div> <div class="box-footer"> <button type="reset" class="btn btn-default btn-flat" style="float: right;">Reset</button> <button type="submit" class="btn btn-primary btn-flat" style="float: right;margin-right: 1%;">Add Notification</button> </div> </form> </div> </div>
var stateObject = { "Students": {"BTech First Year": ["ECE 1", "ECE 2", "CSE","EEE","ME"], "BTech Second Year": ["ECE 1", "ECE 2", "CSE","EEE","ME"], "BTech Third Year": ["ECE 1", "ECE 2", "CSE","EEE","ME"], "BTech Fourth Year": ["ECE 1", "ECE 2", "CSE","EEE","ME"], "MTech First Year": ["CSE", "ECE"], "MTech Second Year": ["CSE", "ECE"] }, "Faculties": { "Permanant": ["List1", "List2"], "Adhoc": ["list3", "Euroa"] } } window.onload = function () { var countySel = document.getElementById("countySel"), stateSel = document.getElementById("stateSel"), districtSel = document.getElementById("districtSel"); for (var country in stateObject) { countySel.options[countySel.options.length] = new Option(country, country); } countySel.onchange = function () { stateSel.length = 1; // remove all options bar first districtSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var state in stateObject[this.value]) { stateSel.options[stateSel.options.length] = new Option(state, state); } } countySel.onchange(); // reset in case page is reloaded stateSel.onchange = function () { districtSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done var district = stateObject[countySel.value][this.value]; for (var i = 0; i < district.length; i++) { districtSel.options[districtSel.options.length] = new Option(district[i], district[i]); } } } $(document).ready(function () { $('#date').mask('00/00/0000'); }); $('#datepicker').datepicker({ todayBtn: "linked", language: "it", autoclose: true, todayHighlight: true, format: 'dd-mm-yyyy' });

Related: See More


Questions / Comments: