Assistant Javascript cascading dropdown list - Printable Version +- CodeIgniter Forums (https://forum.codeigniter.com) +-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1) +--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3) +--- Thread: Assistant Javascript cascading dropdown list (/showthread.php?tid=70699) |
Assistant Javascript cascading dropdown list - oshihari - 05-17-2018 I previously managed to create cascading dropdown list successfully but now I am having a problem and I don't know what a problem might be. I want to create cascading dropdownlist which state, then county then state. The cascading doesn't work at all. Can anyone assist please here is the code <div class="row"> <div class="col-md-12"> <div class="panel panel-primary" data-collapsed="0"> <div class="panel-heading"> <div class="panel-title" > <i class="entypo-plus-circled"></i> <?php echo get_phrase('account_creation_form');?> </div> </div> <div class="panel-body"> <?php echo form_open('admin/member/create/' , array('class' => 'form-horizontal form-groups-bordered validate ajax-submit', 'enctype' => 'multipart/form-data'));?> <div class="form-group"> <label for="field-1" class="col-sm-4 control-label"><?php echo get_phrase('id_number');?></label> <div class="col-sm-7"> <div class="input-group"> <span class="input-group-addon"><i class="entypo-user"></i></span> <input type="text" class="form-control" name="id_number" maxlength="13" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>" value="" autofocus> </div> </div> </div> <div class="form-group"> <label for="field-1" class="col-sm-3 control-label"><?php echo get_phrase('birth_date');?></label> <div class="col-sm-5"> <div class="input-group"> <span class="input-group-addon"><i class="entypo-calendar"></i></span> <input type="text" class="form-control datepicker" name="birthdate" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>" value="" autofocus> </div> </div> </div> <div class="form-group"> <label for="field-1" class="col-sm-4 control-label"><?php echo get_phrase('gender');?></label> <div class="col-sm-7"> <select class="selectboxit" name="gender"> <option><?php echo get_phrase('select_a_gender');?></option> <option><?php echo get_phrase('male');?></option> <option><?php echo get_phrase('female');?></option> </select> </div> </div> <div class="form-group"> <label for="field-4" class="col-sm-4 control-label"><?php echo get_phrase('state');?></label> <div class="col-sm-7"> <select name="optone" id="stateSel" class="selectboxit"> <option value="" selected="selected">Select province</option> </select> </div> </div> <div class="form-group"> <label for="field-5" class="col-sm-4 control-label"><?php echo get_phrase('country');?></label> <div class="col-sm-7"> <select name="opttwo" id="countySel" class="selectboxit""> <option value="" selected="selected">Please select province first</option> </select> </div> </div> <div class="form-group"> <label for="field-6" class="col-sm-4 control-label"><?php echo get_phrase('city');?></label> <div class="col-sm-7"> <select name="optthree" id="citySel" class="selectboxit"> <option value="" selected="selected">Please select region first</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-7"> <button type="submit" class="btn btn-info" id="submit-button"><?php echo get_phrase('add_member');?></button> <span id="preloader-form"></span> </div> </div> <?php echo form_close();?> </div> </div> </div> </div> <script> // url for refresh data after ajax form submission var post_refresh_url = '<?php echo base_url();?>index.php?admin/reload_member_list'; var post_message = 'Data Created Successfully'; </script> <script> var $input1 = $("input[name=id_number]"), $input2 = $("input[name=birthdate]"), $input3 = $("input[name=gender]"); $input1.on("keyup", function(){ var id = $input1.val().split(" "), // gets the ID number you typed birthdate="", gender="", part1 = id[0], part2 = id[1]; console.log($input1.val()); if(part1.length>5) birthdate = part1.substr(0,2) + "/" + part1.substr(2,2) + "/" + part1.substr(4,2); $input2.val(birthdate); if(part2 && part2.length){ if(parseInt(part2[0]) <5) gender = "Female" else gender = "Male" $input3.val(gender); } }) </script> <script type="text/javascript"> var stateObject = { "California": { "Monterey": ["Salinas", "Gonzales"], "Alameda": ["Oakland", "Berkeley"] }, "Oregon": { "Douglas": ["Roseburg", "Winston"], "Jackson": ["Medford", "Jacksonville"] } } window.onload = function () { var stateSel = document.getElementById("stateSel"), countySel = document.getElementById("countySel"), citySel = document.getElementById("citySel"); for (var state in stateObject) { stateSel.options[stateSel.options.length] = new Option(state, state); } stateSel.onchange = function () { countySel.length = 1; // remove all options bar first citySel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var county in stateObject[this.value]) { countySel.options[countySel.options.length] = new Option(county, county); } } stateSel.onchange(); // reset in case page is reloaded countySel.onchange = function () { citySel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done var cities = stateObject[stateSel.value][this.value]; for (var i = 0; i < cities.length; i++) { citySel.options[citySel.options.length] = new Option(cities[i], cities[i]); } } } </script> <!-- calling ajax form submission plugin for specific form --> <script src="assets/js/ajax-form-submission.js"></script> |